访问图片出现403的解决方法

在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.

总结了一下,有两种方法是可以解决这个问题的:

• 使用

  images.weserv.nl

  方案

• no-referrer

第一种:使用

images.weserv.nl

1 2 3 4 5 6 7

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

<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>

　　

说明

如果我们是访问的gif图片,使用第一种方案是没有gif效果的,只能显示静态图片.这个时候推荐大家使用第二种.亲测可以完美展示gif效果.

–补充—

经过试验,不是多有gif网站都支持第二种方式,还是有些会失败.请大家自行试验.如果有更好的方法可以一起交流.