小程序的image标签有几个常用的属性,lazy-load(懒加载,默认为fasle,不过和本文无关),bindload(当图片加载完成的时候触发的事件),另一个就是我们本文的主角binderror(当发生错误的时候触发的事件);

有些列表中的图片是空的,我们需要对他进行处理,也就是替换一张默认图片,具体替换方法如下: 

wxml:  

<view wx:for="{{firstList}}" wx:key="index" data-id="{{item.id}}" bindtap="intoDetail" class='recordItem'>
	<view class="pic">
	<--data-img就是图片加载失败的时候加载的默认图片;binderror就是图片加载失败触发的事件-->
	<image src="{{item.img_url==''?'../../img/public/default.png':item.img_url}}" data-index='{{index}}' data-img='../../img/public/default.png' binderror='errDetails'></image>
	</view>
</view>

js:  

// 图片加载错误的时候触发; 把当前的错误图片替换成默认图片;
  errDetails(e) {
    var firstList = this.data.firstList;
    var default_img = e.currentTarget.dataset.img;
    var index = e.currentTarget.dataset.index;
    firstList[index].img_url = default_img;
    this.setData({
      firstList
    })
  },

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/9420