小程序使用网络图片不显示的问题(防盗链机制)

在开发小程序过程中,图片不显示(使用background-image和image标签都不可以),开发工具内不报错
在项目中使用的框架是weapp,想起来有一个van-image标签可以打印出报错日志,因为它会把链接作为接口请求,于是借此分析日志:
可以看到图片后边加上了#devtools_refererOrigin的字样,得知是由于网站设置了防盗链机制
简单的处理方式是在图片的完整url前添加(https://images.weserv.nl/?url=
var newurl = https://images.weserv.nl/?url= + oldurl;
拼接地址后就可以正常使用了(前缀网站已经开源)
ps: Images.weserv.nl,是一个利用cloudflare的CDN,可缓存、直链Google Drive、OneDrive等图片的网站,同时,发布了了这样的源码,自己可以创建,用于图片存储等。支持IPv6。
posted @ 2021-03-17 13:57  日昇昌  阅读(2408)  评论(0)    收藏  举报