微信小程序实例：image组件的binderror事件处理

微信公众平台关于image组件的讲解都挺详细的，至于在binderror错误事件处理上并没有详细说明。那么如果我们在获取网络图片出现404 nofound的情况下要怎么处理呢？如果是单张和循环内的某张图片出错的情况下又该如何处理呢？

首先，我们都知道html的img组件自带一个onerror图片出错事件处理机制，写法就如同js一样。语法如下：

<img src="xxx" onerror="this.src='./img/default.png'"/>  

但是，我尝试在小程序里的image组件也做这样的处理，却发现并不能实现，反而要提示APP-SERVICE-Engine错误信息。后来重新翻看文档，找到类似的事件处理binderror，文档支出可以通过event.detail打印出具体的出错信息，并没有给出出错后的具体解决方案。通过和前辈沟通得到的解决方案如下：

通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端，就是image组件的src是动态的值而不能是直接指向某张图片的情况下。

那么具体处理代码如下：
demo.wxml：：
单张图片：

<image src="{{testImg}}" binderror="errImg" bindload="loadImg" data-err-img="testImg" />  

多张图片的情况：

<view class="bd-left-item" wx:for="{{classicArr}}">  
  <image src="{{item.img}}" class="item-img" binderror="errImg" data-err-img="classicArr[{{index}}].img" />  
  <view class="bd-left-item-bottom">  
    <view class="title">{{item.title}}</view>  
    <view class="addr">{{item.addr}}</view>  
    <view class="tag" wx:for-items="{{item.tags}}" wx:for-item="tag">{{tag}}</view>  
  </view>  
</view>  

demo.js：：

Page( {  
  data: {  
    classicArr: [  
      {  
        img: "../../img/01.png",  
        title: "现实世界的桃花源",  
        addr: "福建省南安市东田镇香草世界",  
        tags: ["摄影", "PS"]  
      },  
      {  
        img: "../../img/default.png",  
        title: "南普陀",  
        addr: "福建省厦门市南普陀",  
        tags: ["摄影1", "PS"]  
      },  
      {  
        img: "../../img/default.png",  
        title: "武夷山",  
        addr: "福建省....",  
        tags: ["摄影", "PS2"]  
      }  
    ],  
    testImg: "../img/01.png"  
  },  
  errImg: function(e){  
    var _errImg=e.target.dataset.errImg;  
    var _objImg="'"+_errImg+"'";  
    var _errObj={};  
    _errObj[_errImg]="../../img/01.png";  
    console.log( e.detail.errMsg+"----"+ _errObj[_errImg] + "----" +_objImg );  
    this.setData(_errObj);//注意这里的赋值方式...  
  }  
});  

去掉dataset属性，展示的是一片空白

加入dataset属性后，结合binderror事件处理图片

但是这样存在一个情况就是每个页面都写这个程序不是很臃肿，那么我们考虑怎么把他写入到模块js文件里面呢？

解决方案：：先把this对象传入到js函数里面，就可以直接修改外面的data数据了。具体函数如下：
commons.js：：

//远程图片no found情况下指引  
function errImgFun(e, that){  
  var _errImg=e.target.dataset.errImg;  
  var _errObj={};  
  _errObj[_errImg]="../../img/01.png";  
  console.log( e.detail.errMsg+"----" + "----" +_errImg );  
  that.setData(_errObj);    
}  
module.exports = {  
  sayHello: sayHello,  
  errImgFun: errImgFun  
}  

index.js：：

var comm=require('../../common/common.js');  
  
Page({  
  errImg: function(ev){  
    //需要访问当前页面的数据对象传递到其它页面上  
    var _that=this;  
    comm.errImgFun(ev, _that);  
  },  
})