在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.
总结了一下,有两种方法是可以解决这个问题的:
- 使用
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/[email protected]_1l_2o_100sh.jpg
第二种:使用no-referrer
方案
这种方案不仅针对图片的防盗链,还可以是其他标签.
在前端页面头部添加一个meta
<meta name="referrer" content="no-referrer" />
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>
说明
如果我们是访问的gif图片,使用第一种方案是没有gif效果的,只能显示静态图片.这个时候推荐大家使用第二种.亲测可以完美展示gif效果.
from:https://blog.csdn.net/tiantang_1986/article/details/83748782
原文地址:https://www.cnblogs.com/youmingkuang/p/10205569.html
时间: 2024-10-20 14:21:52