小程序---圖片加載出錯時,顯示默認圖片

      在讀取相似新聞列表等功能時,通常都會有圖片,有時會由於數據問題,圖片會加載不出來,此時,爲了更好的用戶體驗,html

咱們應當在圖片數據出錯時,用默認的圖片代替它。html5

    html5有對應的img事件:onerror小程序

    下面是小程序裏的一個demo,事件是binderror:this

<block wx:for="{{list}}">
   
     <image class='news-img' src="{{item.imgSrc}}" binderror='imageError' data-img="list[{{index}}].imgSrc"></image>
   
 </block>
//圖片加載出錯,替換爲默認圖片
  imageError: function (e) { var _errImg = e.target.dataset.img var _errObj = {} _errObj[_errImg] = "/images/pic_liebiaomoren@2x.png"
    this.setData(_errObj) //注意這裏的賦值方式,只是將數據列表中的此項圖片路徑值替換掉 
  }
相關文章
相關標籤/搜索