先说下思路:这种处理 都是修改 原有的 出错数组图片路径对应的值 ,将其改为正确的图片路径。(小程序类似这样的改错,都是这个思路)
正题:
官网的image组件我就不详细说了,官网binderror错误事件处理并没有详细的说明,如果在获取网络图片出现404 nofound的情况下要怎样处理呢?
有单张图片的处理、和多张(数组)图片的处理 写法大同小异
以前html的写法 img src="aaa" οnerrοr="this.οnerrοr=null;this.src='aaa1" aaa aaa1 图片路径
这里用不了只好用微信的 binderror
多张(数组)
wxml 写法
view wx:for="{{AArr}}" wx:for-index='key' wx:for-item='itemone'image src="{{itemone.img}}" binderror="errImg" data-err-img="AArr[{{key}}].img" / /view当图片出错时触发 binderror="errImg"
js 写法
data: { AArr: [ { img: "/imape/1.jpg"}, { img: "/imape/2.jpg" } ] },errImg: function (e) { var that=this console.log( "-出错啦-" ); var _errImg = e.target.dataset.errImg; var _objImg = "'" + _errImg + "'"; var _errObj = {}; _errObj[_errImg] = "/imape/2.jpg"; that.setData(_errObj);//注意这里的赋值方式... }errImg方法 就是改写原数组
单张
wxml 写法
image src="{{testImg}}" binderror="errImg" data-err-img="testImg" / js 写法
data: { testImg: "/imape/11.jpg" },errImg: function (e) { var that=this console.log( "-出错啦-" ); var _errImg = e.target.dataset.errImg; var _objImg = "'" + _errImg + "'"; var _errObj = {}; _errObj[_errImg] = "/imape/2.jpg"; that.setData(_errObj);//注意这里的赋值方式... }我之前出的问题是 数组中数组改值 key key1 是对应的数组索引
data-err-img="list_data[{{key}}].PhotoArray[{{key1}}]"













