前言

    相信很多人都会遇到图片地址失效导致无法显示图片，只显示几个字（加载失败），这样非常不美观。最近我在图片遍历显示时也遇到了其中一张图地址失效的问题，一堆图片中夹着一个加载失败，呃，感觉很不舒服，所以只能想办法解决。

---

处理方式

一：替换

有时候可以选择用一张图片替换地址失效的图片，这样可以保持原有结构并且保证美观。

<el-image
  :src="img.uRL"
  v-for="(img,index) in pictures"
  :key="index"
  >
  <div slot="error" class="image-slot">
    <img src="http://images4.c-ctrip.com/target/hotel/1000/9/3f672c76bfc74e509488a44e563c2c54_Y_600_400.jpg" alt="">
  </div>
</el-image>

效果图：

替换图片后：

二：隐藏

有时候我需要展示不同的东西时，就不能随意那图片替代了，例如我做酒店图片展示，每个酒店的图片都不同，这时就不应该继续替换了，所以我采取了隐藏的方法。

从图中我们可以知道加载失败是由el-image__error类控制样式，这时我们只需要设置样式隐藏它即可。

.el-image__error{
  display: none;
}

效果图：

隐藏后：

三：继续思考

这个图片数组展示我还采用了element-ui的大图预览，即加多了个将图片数组srcList

<el-image
  :src="img.uRL"
  v-for="(img,index) in pictures"
  :key="index"
  :preview-src-list="srcList">
</el-image>

尽管采取了隐藏失效图片，但点击图片查看大图的时候，因为有图片的地址失效了，所以会出现下图的情况：

后来采取图片出错回调函数来修改大图预览数组

<el-image
   :src="img.uRL"
   v-for="(img,index) in pictures"
   :key="index"
   @error="hideErrorImage(index)"         //回调函数
   :preview-src-list="srcList">
 </el-image>

 //处理失效图片,在大图预览数组中去掉那个失效的地址，不过还有一定错误，有待改进
 hideErrorImage(index){
   var srcList = this.srcList
   srcList[index] = ''
   srcList = srcList.filter(item=>item!='')
   this.srcList = srcList
 },

采取上面的回调函数，用户虽然使用无碍，大图预览中也不会出现之前的加载失败，不过打开控制台还是有报错，这个我暂时还没解决。