微信小程序列表图片加载错误处理

在加载列表的时候，难免会出现部分图片地址错误或者各种原因导致图片加载失败，下面记录一下我遇到部分图片加载不出来的解决方法。我这里是加载错误的图片会设置成一张默认的本地图片

 

<view class="itemList" wx:for="{{reportList}}" data-name="{{reportList[index].GEOID}}" wx:key="{{index}}" bindtap="navigateToPage">

<image class="iconStyle" mode="aspectFill" src='{{item.PICTURENAME==""?defaultImg:item.PICTURENAME}}' binderror="errorFunction" data-errorimg="{{index}}"></image>

<view class="itemContentStyle">

<text class="itemNumberStyle.text_ellipsis">{{item.YWBH}}\n</text>

<view class="sideView">

<view class="tag_text.text_ellipsis"> {{item.XSHJ}}</view>

<text class="itemAddressStyle.text_ellipsis.right_p">{{item.DJSJ}}</text>

</view>

<text class="taskAddressStyle.text_ellipsis">{{item.JTDZ}}</text>

</view>

</view>

下面是服务器返回的数据

{"pageNumber":1,"pageSize":10,"total":2,"rows":[{"YWBH":"WFXS20200703240517070","GEOID":"6ce2c084-a662-4c0f-818f-cb93f317212d","JTDZ":"湖北省武汉市*****派出所附近","XSLY":"微信举报","XZQDM":"210112018009","CLZT":"4","DJSJ":"2020-07-03 17:17:07","XSHJ":"分办","PICTURENAME":"http://*********"},{"YWBH":"WFXS20200424240527240","GEOID":"425a85cc-ba94-4aad-8c54-bc60e9fc246b","JTDZ":"湖北省****公园附近","XSLY":"微信举报","XZQDM":"210112018009","CLZT":"4","DJSJ":"2020-04-24 17:27:24","XSHJ":"分办","PICTURENAME":"http://*********"}]}

这是后台返回的数据，我稍做了修改，PICTURENAME里面就是我们要取的图片url.

下面来处理加载失败的图片，在<image>中我们可以看到有这样一行代码：binderror="errorFunction"，errorFunction就是用来处理图片加载失败的时候的处理逻辑。通过var errorImgIndex = e.target.dataset.errorimg可以拿到错误图片的下标，我们将列表的原始数据datas绑定到imgList，然后通过imgList[errorImgIndex].PICTURENAME = this.data.defaultImg将错误的图片替换为本地的默认图片，最后把修改好的imgList数据重新赋值给列表数据datas

 

errorFunction: function (e) {

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

var errorImgIndex = e.target.dataset.errorimg //获取错误图片循环的下标

var imgList = this.data.datas //将图片列表数据绑定到变量

imgList[errorImgIndex].PICTURENAME = this.data.defaultImg //错误图片替换为默认图片

this.setData({

datas: imgList

})

}

},

最后上效果图，最下面就是加载失败的图片，已经被替换成我们准备好的加载失败专用图片。