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

小程序不支持h5中的onerrorimg，只開放了binderror屬性，當(dāng)錯(cuò)誤發(fā)生時(shí)，會(huì)發(fā)布到 AppService，事件對(duì)象event.detail = {errMsg: 'something wrong'}。

網(wǎng)上查了下，沒有什么好的解決方法，找了幾個(gè)案例結(jié)果都沒有實(shí)現(xiàn)想要的效果。

結(jié)合前邊看過的案例，大部分都是采用修改數(shù)據(jù)源將錯(cuò)誤圖片替換為默認(rèn)圖片的，但是有好多代碼都沒貼全，以致不好理解。

下面就根據(jù)自己遇到的情況對(duì)圖片為空、圖片路徑錯(cuò)誤的情況進(jìn)行了處理，相關(guān)代碼如下，相關(guān)數(shù)據(jù)都有說明：

wxml:

1. <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:

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

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