微信小程序開發(fā)設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片的方法

本文小編為大家詳細(xì)介紹“微信小程序開發(fā)設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片的方法”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序開發(fā)設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

wxml:

<image src='{{imgList[index]==""?defaultImg:imgList[index]}}' binderror="errorFunction" data-errorimg="{{index}}" />

說明：　　　　　
imgList: 圖片數(shù)據(jù)源列表，需要在data中定義初始數(shù)據(jù)，或者從接口動(dòng)態(tài)獲取數(shù)據(jù)；
errorFunction: 圖片加載錯(cuò)誤綁定的事件，錯(cuò)誤圖片替換為默認(rèn)圖片主要在這里操作；
data-errorimg： 錯(cuò)誤圖片索引數(shù)據(jù)，需要在errorFunction中用以記錄錯(cuò)誤圖片對(duì)應(yīng)的位置；
如果圖片地址為空，是不會(huì)觸發(fā)binderror的，所以就直接對(duì)圖片地址做判斷，如果為空，則替換為默認(rèn)圖片。

js:

data: {imgList:"", //圖片列表，動(dòng)態(tài)獲取defaultImg: "../../../assets/img/defaultImg.png", //默認(rèn)圖片},......省略圖片數(shù)據(jù)源獲取代碼....../*** 圖片加載錯(cuò)誤觸發(fā)的事件*/errorFunction: function (e) {if(e.type=="error"){var errorImgIndex = e.target.dataset.errorimg //獲取錯(cuò)誤圖片循環(huán)的下標(biāo)var imgList= this.data.imgList 　　　　　　　//將圖片列表數(shù)據(jù)綁定到變量imgList[errorImgIndex] = this.data.defaultImg //錯(cuò)誤圖片替換為默認(rèn)圖片this.setData({evaluteUserPic: evaluteUserPic})}}

備注：使用這種方法，是需要將圖片數(shù)據(jù)源放在data中的，這樣才可以在 binderror 的事件中進(jìn)行數(shù)據(jù)的替換，不可以直接在wxml中調(diào)用接口的數(shù)據(jù)。

讀到這里，這篇“微信小程序開發(fā)設(shè)置默認(rèn)圖片、錯(cuò)誤加載圖片的方法”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。