微信公眾平臺關于image組件的講解都挺詳細的，至于在binderror錯誤事件處理上并沒有詳細說明。那么如果我們在獲取網(wǎng)絡圖片出現(xiàn)404 nofound的情況下要怎么處理呢？如果是單張和循環(huán)內的某張圖片出錯的情況下又該如何處理呢？

首先，我們都知道html的img組件自帶一個onerror圖片出錯事件處理機制，寫法就如同js一樣。語法如下：

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

但是，我嘗試在小程序里的image組件也做這樣的處理，卻發(fā)現(xiàn)并不能實現(xiàn)，反而要提示APP-SERVICE-Engine錯誤信息。后來重新翻看文檔，找到類似的事件處理binderror，文檔支出可以通過event.detail打印出具體的出錯信息，并沒有給出出錯后的具體解決方案。通過和前輩溝通得到的解決方案如下：

通過dataset屬性將image組件的src變量值存入。binderror事件通過獲取屬性變量值改變data的數(shù)據(jù)。當然這個有個弊端，就是image組件的src是動態(tài)的值而不能是直接指向某張圖片的情況下。

那么具體處理代碼如下：
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: "現(xiàn)實世界的桃花源",  
        addr: "福建省南安市東田鎮(zhèn)香草世界",  
        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函數(shù)里面，就可以直接修改外面的data數(shù)據(jù)了。具體函數(shù)如下：
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){  
    //需要訪問當前頁面的數(shù)據(jù)對象傳遞到其它頁面上  
    var _that=this;  
    comm.errImgFun(ev, _that);  
  },  
})