微信小程序图片加载失败显示默认图片的方法

由于历史数据迁移的问题，后台一些图片链接失效，或者无效。在微信小程序中，无效的图片链接会显示空白，非常影响体验。

此时，可以使用 image 组件的 binderror 来处理，替换为一张默认图片。

binderror 使用示例

wxml 模板中不要忘了加上 data index 来传递下标

<image wx:for="{{avatars}}" wx:for-index="index" wx:for-item="avatar" src="{{avatar}}"
                binderror="imgError" data-index='{{index}}'
                class="round">
</image>

js 逻辑

imgError: function(e) {
  var index = parseInt(e.currentTarget.dataset.index)
  this.setData({
    [`avatars[${index}]`]: '/images/default_avatar.png'
  })
},

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式