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

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

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

需求

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

小程序

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

場(chǎng)景

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

多張圖片報(bào)錯(cuò)解決方法

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

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

其他

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

結(jié)束

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94871.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

andot 2019-08-23 17:56 評(píng)論0 收藏0