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

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

 

{{item.YWBH}}\n

{{item.XSHJ}}

{{item.DJSJ}}

{{item.JTDZ}}

下面是服务器返回的数据

{"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.

下面来处理加载失败的图片，在中我们可以看到有这样一行代码：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

})

}

},

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