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

wxml:

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

說明：　　　　　
imgList: 圖片數據源列表，需要在data中定義初始數據，或者從接口動態獲取數據；
errorFunction: 圖片加載錯誤綁定的事件，錯誤圖片替換為默認圖片主要在這里操作；
data-errorimg： 錯誤圖片索引數據，需要在errorFunction中用以記錄錯誤圖片對應的位置；
如果圖片地址為空，是不會觸發binderror的，所以就直接對圖片地址做判斷，如果為空，則替換為默認圖片。

js:

data:{imgList:"",//圖片列表，動態獲取defaultImg:"../../../assets/img/defaultImg.png",//默認圖片},......省略圖片數據源獲取代碼....../***圖片加載錯誤觸發的事件*/errorFunction:function(e){if(e.type=="error"){varerrorImgIndex=e.target.dataset.errorimg//獲取錯誤圖片循環的下標varimgList=this.data.imgList　　　　　　　//將圖片列表數據綁定到變量imgList[errorImgIndex]=this.data.defaultImg//錯誤圖片替換為默認圖片this.setData({evaluteUserPic:evaluteUserPic})}}

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

總結

以上是生活随笔為你收集整理的微信小程序开发设置默认图片、错误加载图片的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。