微信小程序> 小程序图片出错、加载失败处理(image组件的binderror事件处理)

小程序图片出错、加载失败处理(image组件的binderror事件处理)

浏览量:562 时间: 来源:扛刀仔

先说下思路:这种处理 都是修改    原有的    出错数组图片路径对应的值    ,将其改为正确的图片路径。(小程序类似这样的改错,都是这个思路)

正题:

官网的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}}]"

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎