小程序加載圖片失敗，默認(rèn)圖片的替換方法

jas0n 發(fā)布于2019-08-22 17:07 / 969人閱讀

摘要：把這個值傳到方法中進(jìn)行數(shù)據(jù)的替換就可以了。怎么樣簡單吧其他因?yàn)樾〕绦虮容^特殊，就拿為例，其實(shí)在原生的標(biāo)簽中是有這個這個方法的。默認(rèn)報錯替換的圖片結(jié)束其實(shí)方法很簡單，查了一下資料覺得應(yīng)該整理一下，希望大家能學(xué)到。

需求

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

小程序

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

場景

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

多張圖片報錯解決方法

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

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

其他

因?yàn)樾〕绦虮容^特殊，就拿H5為例，其實(shí)在原生的HTML標(biāo)簽中是有這個onerror這個方法的。

結(jié)束

其實(shí)方法很簡單，查了一下資料覺得應(yīng)該整理一下，希望大家能學(xué)到。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94871.html

相關(guān)文章

圖片加載相關(guān)技術(shù)

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

ZweiZhao 2019-08-20 14:47 評論0 收藏0
圖片加載相關(guān)技術(shù)

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

junnplus 2019-08-30 15:53 評論0 收藏0
圖片加載相關(guān)技術(shù)

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

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

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

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

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

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