小程序 image 組件常見問題

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。

相關文章:

小程序 image 組件 webp 屬性

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容