前言
相信很多人都会遇到图片地址失效导致无法显示图片,只显示几个字(加载失败),这样非常不美观。最近我在图片遍历显示时也遇到了其中一张图地址失效的问题,一堆图片中夹着一个加载失败,呃,感觉很不舒服,所以只能想办法解决。
处理方式
一:替换
有时候可以选择用一张图片替换地址失效的图片,这样可以保持原有结构并且保证美观。
<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
},
采取上面的回调函数,用户虽然使用无碍,大图预览中也不会出现之前的加载失败,不过打开控制台还是有报错,这个我暂时还没解决。