在寫小程序的時候,訪問一個網址獲取圖片,但是顯示會出現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/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網站都支持第二種方式,還是有些會失敗.請大家自行試驗.如果有更好的方法可以一起交流.