码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-23 18:50:40      阅读:4943      评论:0      收藏:0      [点我收藏+]

标签:--   ase   data   func   rri   more   问题   style   set   

      在读取类似新闻列表等功能时,一般都会有图片,有时会因为数据问题,图片会加载不出来,此时,为了更好的用户体验,

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

    html5有对应的img事件:onerror

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

 <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) //注意这里的赋值方式,只是将数据列表中的此项图片路径值替换掉  
  },

 

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

标签:--   ase   data   func   rri   more   问题   style   set   

原文地址:https://www.cnblogs.com/lichunyan/p/8920402.html

(4)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!