小程序---图片加载出错时，显示默认图片

Posted 2020-11-01 lichunchun

      在读取类似新闻列表等功能时，一般都会有图片，有时会因为数据问题，图片会加载不出来，此时，为了更好的用户体验，

我们应当在图片数据出错时，用默认的图片代替它。

    html5有对应的img事件：onerror

    下面是小程序里的一个demo,事件是binderror：

 <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/[email protected]"
    this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉  
  },