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

文章目录

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

    此时,可以使用 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'
      })
    },