在寫小程式的時候,訪問一個網址獲取圖片,但是顯示會出現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/[email protected]_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效果.

–補充—
經過試驗,不是多有gif網站都支援第二種方式,還是有些會失敗.請大家自行試驗.如果有更好的方法可以一起交流.

文章參考:
https://segmentfault.com/a/1190000011628835
https://www.cnblogs.com/mttcug/p/8109036.html

您的打賞是對我勞動成果的肯定,無論數額多少,都非常感謝,謝謝打賞!
微信二維碼

支付寶二維碼: