image 組件拉取圖片的本質是使用wx.downloadFile這個接口加載圖片的資源,加載以后,再將加載的圖像繪制出來。
圖片鏈接可以正常訪問,但 image 組件加載不出圖片
1、圖片格式不規(guī)范
如線上 SSL 證書有問題。或者文件描述信息例如content-type、length等信息不標準不規(guī)范。
2、服務器發(fā)生了 302 跳轉。
302,即 HTTP 狀態(tài)碼,就像生活中的呼叫轉移功能,我們給 A 打電話,A 通過呼叫轉移,把我們的呼叫轉移到 B 號碼上,就相當于服務器端的 302 跳轉。在服務器接收到前端 HTTP 請求的時候,前端想要加載 A 頁面,但是 A 頁面由于網(wǎng)站改版現(xiàn)在不存在了,取而代之的是B頁面,此時服務器就可以返回 302 狀態(tài)碼,同時再返回一個 B 頁面的地址,瀏覽器看到狀態(tài)碼和地址時,就會自動跳轉到 B 頁面。
涉及到頁面跳轉的狀態(tài)碼一共有兩個,301 和 302 都是頁面重定向的。
- 301 是請求的網(wǎng)頁永久的轉移到了新地址。
- 302 是請求的網(wǎng)頁臨時轉移到了新地址。
圖片短連接就是利用了服務器端的 302 跳轉實現(xiàn)的。小程的 image 組件也是支持短連接的。這是微信團隊在組件內部進行了處理,因為如果我們單獨拿wx.downloadFile這個接口去加載一個短連接的圖片時,是直接返 403 錯誤的。
3、網(wǎng)絡不好,加載超時。
使用 image 組件的 binderror 屬性處理,監(jiān)聽 error 事件,重新給 src 屬性賦值。
4、加載 webp 格式圖片。
需要 image 組件設置 webp 屬性為 true。