微信小程序中image組件binderror使用例子與js中的

這篇文章將為大家詳細講解有關(guān)微信小程序中image組件binderror使用例子與js中的onerror區別是什么，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

微信小程序image組件binderror使用例子(對應html、js中的onerror)

　　　　官方文檔

在微信小程序開(kāi)發(fā)中，我們使用列表包含圖片，如果這個(gè)圖片鏈接404錯誤，那么我們應該給它提供一個(gè)默認的友好URL地址。html和js中使用onerror事件就可以了

<img src="image.gif" onerror="this.src='https:w.chesudi.com/Public/web/img/onerrorcar.png'" />

微信小程序image組件沒(méi)提供onerror事件，提供了一個(gè)binderror事件來(lái)代替。

如果圖片鏈接404，就會(huì )觸發(fā)這個(gè)binderror事件，我們在綁定的事件里修改對應的數據源就好了，如下

.wxml文件

<image class="carlist_img" src="{{item.img}}" binderror="binderrorimg" data-errorimg="{{index}}"></image>

.js文件　

 binderrorimg:function(e){ 
  var errorImgIndex= e.target.dataset.errorimg //獲取循環(huán)的下標
  var imgObject="carlistData["+errorImgIndex+"].img" //carlistData為數據源，對象數組
  var errorImg={}
  errorImg[imgObject]="https://cache.yisu.com/upload/information/20200622/114/77161.png" //我們構建一個(gè)對象
  this.setData(errorImg) //修改數據源對應的數據
 }

 易錯點(diǎn)：this.setData({"carlistData["+errorImgIndex+"].img"：對象})類(lèi)似這樣的就不正確了