微信小程序image图无法加载出来的解决办法（亲测有效）

在微信小程序中，第一次加载页面时图片（线上图）加载不出来/图片灰色背景显示，这个时候该如何解决这个问题呢?请带着问题查看这篇博客，希望对您有所帮助（点赞skr）

1. 看官方文档？
2. 自行解决？

写在前面（初衷）

鉴于现在网上的博客80%的博客不仅内容相同有的时候连错的地方都是一模一样，连一个标点符号都不带改的这种现状，本人在工作与学习中经常遇到此种情况，带来诸多不便所以特此整理这篇文章，也为了帮助其他开发者节约更多的时间和精力。

1.看官方文档

看小程序官方文档？官方文档写的大致意思是，图片尺寸不合符/图片不规范，我们会尽力优化的（都一年多，问题还在优化–手动滑稽）还得自己想办法解决！

2.自行解决

网上搜搜微信小程序image图片异常加载是否有捕捉函数？结果一搜还真有；图片异常加载函数binderror可以捕获到。

1.列表中图片异常

 <swiper class="section icons" indicator-dots="false" autoplay="false" interval="" duration="500">
        <swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="icons">
          <view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" >
            <navigator url="{{icon.url}}" hover-class="changestyle">
              <image data-index='{{index}}' src="{{icon.img}}" binderror="imageOnloadError" mode="scaleToFill"  class="cu-avatar round lg" />
            </navigator>
            <text>{{icon.name}}</text>
          </view>
        </swiper-item>
      </swiper>

 imageOnloadError(e) {
    console.log("图片加载出错啦")
    var that = this;
    var index = e.currentTarget.dataset.index;//获取加载出错的图片下标
    var _imgUrlList = this.data.imglist;//后台返回的图片路径数组
    var img = '../../images/yichang.png';//图片加载失败时展示的默认图
    _imgUrlList[0][index].img = img;
    console.log(_imgUrlList)
    that.setData({
      icons: _imgUrlList
    })
  },

2.单个图片异常

<image src="{{imgurl}}"  binderror="imageOnloadError" mode="scaleToFill" class="cu-avatar round lg" ></image>

imageOnloadError(e){
console.log(e)
var img='../../images/yichang.png'//图片加载失败时展示的默认图
this.setData({
imgurl:img
})
}

写在最后

如果您觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！