小程序---图片加载出错时,显示默认图片

      在读取相似新闻列表等功能时,通常都会有图片,有时会由于数据问题,图片会加载不出来,此时,为了更好的用户体验,html

咱们应当在图片数据出错时,用默认的图片代替它。html5

    html5有对应的img事件:onerror小程序

    下面是小程序里的一个demo,事件是binderror:this

<block wx:for="{{list}}">
   
     <image class='news-img' src="{{item.imgSrc}}" binderror='imageError' data-img="list[{{index}}].imgSrc"></image>
   
 </block>
//图片加载出错,替换为默认图片
  imageError: function (e) { var _errImg = e.target.dataset.img var _errObj = {} _errObj[_errImg] = "/images/pic_liebiaomoren@2x.png"
    this.setData(_errObj) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉 
  }
相关文章
相关标签/搜索