关于微信小程序图片加载出错解决方法之替换默认图片

小程序中经常会有批量遍历渲染的列表，如果列表中有图片选项但是无值时或者有值但是图片加载错误时如何处理呢
比如像以下这种评论列表：

  <view class='lists-box rel'>
      <view class='list-box rel' wx:for="{{commentList}}" wx:if="{{item.comment}}"  wx:key="{{index}}" >
        <view class='commentBar'  catchtap='stafferNext' data-item='{{item}}'>
        
            <view class='commentTop'>
              <image class='commentAvatar' src='{{item.UserImg==null || item.UserImg==""?"/pubic/img/ico/avatar.png":item.UserImg}}' binderror="avatarError" data-imgindex="{{index}}"  mode='aspectFill'></image>
              <view>{{item.UserName}}</view>
              <view>{{item.CreateTime}}</view>
            </view>
            <view class='commentCon'>
              {{item.commentContent}}
            </view> 
            
          </view>  
        </view>  
    </view>
当遍历之后得到的item.UserImg为空字符串或者null时会自动使用本地的avatar.png图片来作为图片，当item.UserImg图片路径正常但是不存在或者加载错误时会自动执行binderror=“avatarError” avatarError方法。

//图片加载出错，替换为默认图片
avatarError: function (e) {
    var errorImgIndex = e.target.dataset.imgindex                   //获取循环的下标
    var imgObject = "commentList[" + errorImgIndex + "].UserImg"    //commentList为数据源，对象数组
    var errorImg = {}
    errorImg[imgObject] = "/pubic/img/ico/head(1).png"              //构建一个对象
    this.setData(errorImg)                                          //修改数据源对应的数据
  },

其替换图片的原理便是找到加载显示错误的图片的索引替换掉然后set更新
注意要在遍历的图片image标签里加上data-imgindex="{{index}}"，以便于在函数中获取其index索引。

对应地，单张图片直接替换即可：

//图片加载出错，替换为默认图片
  imageError: function (e) {
    var imgObject = "person.UserImg",              //person为数据源对象
    errorImg = {};
    errorImg[imgObject] = "/pubic/img/avatar.png"; //我们构建一个对象
    this.setData(errorImg);                        //修改数据源对应的数据
  },

备注：如果图片地址为空，是不会触发binderror的，所以就直接对图片地址做判断，如果为空，则替换为默认图片。
————————————————
版权声明：本文为CSDN博主「kirinlau」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kirinlau/article/details/89293975