小程序加載圖片失敗，默認圖片的替換方法

jas0n 發布于2019-08-22 17:07 / 906人閱讀

摘要：把這個值傳到方法中進行數據的替換就可以了。怎么樣簡單吧其他因為小程序比較特殊，就拿為例，其實在原生的標簽中是有這個這個方法的。默認報錯替換的圖片結束其實方法很簡單，查了一下資料覺得應該整理一下，希望大家能學到。

需求

前端請求后臺的接口的時候回，數據會返回圖片的url地址，但是有的時候可能是數據字段的錯誤，或者是返回的鏈接中信息是404，那么前端這邊怎么處理。

小程序

在小程序的官方文檔中有提到,binderror這個事件方法，就是說當你的圖片加載失敗或者404的時候會在方法中有對應的返回值，具體返回的值入下圖

場景

這樣的話應用的場景就課程是頭像上傳報錯或者單張圖片，要是你報錯的圖片是一個列表中的很多的圖片怎么辦？

多張圖片報錯解決方法

其實很簡單，我們用小程序的wepy框架為例:

大致思路：我們會在data數據中得到一個list一樣的圖片數據，或者你可以當成接口返回的數據結構，然后我們循環整個數據的時候會在image標簽找不到資源的時候error事件，我們就會得到一個失敗實例的方法，然后我們在數據循環的時候可以得到list的index值，也就是索引值。把這個值傳到error方法中進行list數據的替換就可以了。怎么樣簡單吧~

其他

因為小程序比較特殊，就拿H5為例，其實在原生的HTML標簽中是有這個onerror這個方法的。

結束

其實方法很簡單，查了一下資料覺得應該整理一下，希望大家能學到。

GPU云服務器云服務器服務器圖片加載失敗小程序滾動到圖片js linux圖片的加載小程序的實用方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94871.html

圖片加載相關技術

摘要：本小節將討論與圖片加載時機相關的技術預加載與懶加載。同樣，可將請求成功與失敗的回調，作為圖片預加載成功與失敗的處理。目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場景，如照片、背景等。對于這些位圖，我們需要考慮它們在加載過程中的不同狀態，而制定不同的表現方案。圖片加載過程中的狀態，大致包括：何時決定...

ZweiZhao 2019-08-20 14:47 評論0 收藏0
圖片加載相關技術

摘要：本小節將討論與圖片加載時機相關的技術預加載與懶加載。同樣，可將請求成功與失敗的回調，作為圖片預加載成功與失敗的處理。目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場景，如照片、背景等。對于這些位圖，我們需要考慮它們在加載過程中的不同狀態，而制定不同的表現方案。圖片加載過程中的狀態，大致包括：何時決定...

junnplus 2019-08-30 15:53 評論0 收藏0
圖片加載相關技術

摘要：本小節將討論與圖片加載時機相關的技術預加載與懶加載。同樣，可將請求成功與失敗的回調，作為圖片預加載成功與失敗的處理。目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場景，如照片、背景等。對于這些位圖，我們需要考慮它們在加載過程中的不同狀態，而制定不同的表現方案。圖片加載過程中的狀態，大致包括：何時決定...

Leo_chen 2019-08-01 16:26 評論0 收藏0
[拆彈時刻]小程序canvas生成海報（二）---優化方案

摘要：注意如果用戶一開始沒有微信授權，生成海報時又必須要用戶頭像不能使用默認的話，那就只能老老實實走之前的流程了。組件名稱終端類型微信版本觸發方法關于的調用方法相冊權限需要你提供保存相冊權限獲取相冊權限成功，給出再次點擊圖片保存到相冊的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海報生成示例海報生成速度緩慢...

LittleLiByte 2019-08-23 17:53 評論0 收藏0
圖片懶加載及異常處理

摘要：設置防抖動，避免回調頻繁執行，影響性能二圖片加載錯誤處理有些時候，由于網絡請求或是資源問題，導致圖片資源請求失敗，這時圖片會展示為非常難看的效果破碎的圖片。這時可以通過監聽圖片的時間來處理。在日常頁面開發中，常常會涉及到圖片的展示。有時候當圖片資源過多時，我們希望能將圖片延遲加載，同時當圖片加載失敗后，能用一張默認圖片去代替其進行展示。其效果如圖所示： showImg(https:/...

andot 2019-08-23 17:56 評論0 收藏0