微信小程序图片加载失败时替换为默认图片的方法

1、第一种情况：单独加载一个图片

index.wxml代码：

<image class=”userinfo-avatar” src=”{{avatar}}” binderror=”errorFunction”></image>

index.js代码：

errorFunction: function(){this.setData({avatar: '/image/default.png'    })    }

2、第二种情况：使用for循环，加载多个图片

index.wxml代码：

<view wx:for="{{imageList}}" wx:for-index="index" wx:for-item="item" wx:key="navItems"><image  src="{{item.img}}" binderror="errorFunction" data-index='{{index}}' mode="widthFix" /></view>

index.js代码：

Page({/**   * 页面的初始数据   */data: {imageList:[      {id:1,name:'白金蜡',price:'60元/次',img:'/images/service/1.jpg'      },      {id: 2,name: '棕榈蜡',price: '90元/次',img: '/images/service/2.jpg'      },      {id: 3,name: '去污蜡',price: '90元/次',img: '/images/service/3.jpg'      },      {id: 4,name: '微镀晶',price: '138元/次',img: '/images/service/4.jpg'      },    ],  },onLoad: function () {  },//图片加载失败时errorFunction: function (event) {var index = event.currentTarget.dataset.indexvar img = 'imageList[' + index + '].img'this.setData({      [img]: '/images/default.jpg'    })  }})

图片基础属性