在小程序开发过程中，不可避免的会在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能被正常展示。我们希望在图片加载失败后显示一张我们预先设定好的默认图片。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
| lazy-load | boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 | 1.5.0 |
| show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 | 2.7.0 |
| binderror | eventhandle | 否 | 当错误发生时触发，，event.detail = {errMsg} | 1.0.0 | |
| bindload | eventhandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} | 1.0.0 |
在微信小程序image组件中支持 binderror 来处理图片加载异常事件，最简单粗暴的方式就在是js中捕获这个事件，然后通过setData将image的地址修改为默认图片地址。在使用场景少的情况下这确实是一个不错的方式，但通常一个小程序中会引入不少的图片用于不同的模块，复用性差的弊端就暴露出来了。同时，setData的通信次数较多，效率较低。
其实我们可以直接在视图层来处理这一异常，使用wxs直接操作节点样式，通过设置默认图片为背景图的方式来展示。
module.exports = {
imageError: function imageError(event, ownerInstance) {
var instance = event.instance
instance.setStyle({
"background-image": "url('" + host + "default.jpg')",
"background-repeat": "no-repeat",
"background-size": "cover"
})
}
}我们定义一个wxs工具函数便于全局引用，设置异常节点的背景样式。在wxml中引入并绑定在image组件的error事件中。
<image
src=""
class="image-class"
mode="aspectFill"
lazy-load
binderror="{{util.imageError}}"
></image>
<wxs src="../../utils/util.wxs" module="util" />这时候就可以较好的处理图片加载异常了，如果大家有更好的方法欢迎与我交流。
