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

发布时间: 2020-08-11 08:13:37 作者: 大象笔记

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

此时,可以使用 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'
  })
},
我是一名山东烟台的开发者,联系作者