总结了一下,有两种方法是可以解决这个问题的:
- 使用images.weserv.nl方案
- 使用no-referrer方案
images.weserv.nl
- 只能显示静态图片
getImage(url){
console.log(url);
// 把现在的图片连接传进来，返回一个不受限制的路径
if(url !== undefined){
return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=');
}
}
把图片路径直接传进去,替换一下原来url的http/https.
或者直接在图片url前加上https://images.weserv.nl/?url=
如:
https://images.weserv.nl/?url=http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg
原图片的http://是可以省略的(与上面的getImage函数是一样的结果)
https://images.weserv.nl/?url=mg.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg
no-referrer
- 这种方案不仅针对图片的防盗链,还可以是其他标签.
- 在前端页面头部添加一个meta
- 小程序采用这种方法
- 可以显示gif效果
<meta name="referrer" content="no-referrer" />
//a标签的referrer
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
//img/image标签的referrer
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>
