什么是小程序图片出错处理机制

什么是小程序图片出错处理机制？简单解释当小程序获取网络图片出现异常时，微信组件提供一种方案解决问题的过程。微信官方公众平台对关于image组件的解释为图片组件，至于在binderror错误事件处理上的说明并不详细，如果在获取网络图片时出现404 nofollow情况下要如何处理？或者是单张和循环内的某张图片出错的情况下又该如何处理呢？这时候就需要调用到小程序图片出错处理机制binderror。

Binderror是小程序绑定错误的处理机制，官方描述为当错误发生时触发事件，事件对象event.detail = {errMsg: \'something wrong\'}。首先，我们都知道html的img组件自带一个onerror图片出错事件处理机制，写法就如同js一样。

但是，小程序里的image组件做这样的处理，却发现并不能实现，反而要提示APP-SERVICE-Engine错误信息。小程序类似的事件处理binderror，文档支出可以通过event.detail打印出具体的出错信息，并没有给出出错后的具体解决方案。了结果后得知解决方案如下：通过dataset属性将image组件的src变量值存入。binderror事件通过获取属性变量值改变data的数据。当然这个有个弊端，就是image组件的src是动态的值而不能是直接指向某张图片的情况下。那么具体处理代码如下：

demo.wxml：

单张图片： src={{testImg}} binderror=errImg bindload=loadImg data-err-img=testImg />  

多张图片的情况：

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);//注意这里的赋值方式...  

  }  

});  

但是这样存在一个情况就是每个页面都写这个程序不是很臃肿，那么我们考虑怎么把他写入到模块js文件里面呢？
     解决方案：先把this对象传入到js函数里面，就可以直接修改外面的data数据了。

小程序图片出错处理机制是利用binderror事件来代替image组件没提供的onerror事件，如果图片链接404，就会触发这个binderror事件，我们在绑定的事件里修改对应的数据源就好了。

推荐阅读：小程序API可以实现哪些功能