小程序怎么設置默認圖片和錯誤加載圖片

這篇文章主要介紹“小程序怎么設置默認圖片和錯誤加載圖片”，在日常操作中，相信很多人在小程序怎么設置默認圖片和錯誤加載圖片問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序怎么設置默認圖片和錯誤加載圖片”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　小程序不支持h6中的onerrorimg，只開放了binderror屬性，當錯誤發生時，會發布到 AppService，事件對象event.detail = {errMsg: 'something wrong'}。

　　下面就根據自己遇到的情況對圖片為空、圖片路徑錯誤的情況進行了處理，相關代碼如下，相關數據都有說明：

　　wxml:

　　說明：

　　imgList: 圖片數據源列表，需要在data中定義初始數據，或者從接口動態獲取數據;

　　errorFunction: 圖片加載錯誤綁定的事件，錯誤圖片替換為默認圖片主要在這里操作;

　　data-errorimg： 錯誤圖片索引數據，需要在errorFunction中用以記錄錯誤圖片對應的位置;

　　如果圖片地址為空，是不會觸發binderror的，所以就直接對圖片地址做判斷，如果為空，則替換為默認圖片。

　　js:

　　data: {

　　imgList:"", //圖片列表，動態獲取

　　defaultImg: "../../../assets/img/defaultImg.png", //默認圖片

　　},

　　......

　　省略圖片數據源獲取代碼

　　......

　　/**

　　* 圖片加載錯誤觸發的事件

　　*/

　　errorFunction: function (e) {

　　if(e.type=="error"){

　　var errorImgIndex = e.target.dataset.errorimg //獲取錯誤圖片循環的下標

　　var imgList= this.data.imgList 　　　　　　　//將圖片列表數據綁定到變量

　　imgList[errorImgIndex] = this.data.defaultImg //錯誤圖片替換為默認圖片

　　this.setData({

　　evaluteUserPic: evaluteUserPic

　　})

　　}

　　}

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

到此，關于“小程序怎么設置默認圖片和錯誤加載圖片”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！