最近使⽤elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径⼀旦初始化加载失败的话就没有异步刷新：
1.给:src设置默认值，避免图⽚加载失败的情况
2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图⽚，否则不加载
tenda路由器<div v-for="(item, index) in imgList" :key="item">
<el-image :src="item" @="srcerr(item, index)"></el-image>
</div>
定义好的测试数据：
imgList: [
中国黑道排行榜
'10.5.4wei1/data/mvtec_ad/grid/train/good/075.png',
'10.5.4che/liwei1/data/mvtec_ad/grid/train/good/207.png'
],
errobj: {}
图⽚加载失败后触发error的函数：
srcerr(item, index) {
if (/^err/.test(this.imgList[index])) {
this.$set(this.imgList, index, this.imgList[index].slice(3))车太贤
} else {
歌曲想说爱你不容易if (!bj[item]) {
} else {
if (bj[item] > 2) {
return
} else {
}
}
this.$set(this.imgList, index, 'err' + item)
}
}
下⾯注释枯燥乏味，可以不看，直接复制上边代码使⽤没什么不可以
1. ⾸先，图⽚加载失败后会触发标签绑定error的函数srcerr，srcerr接收到的参数不必解释，必须要传，有⽤；
2. /^err/.test(this.imgList[index])（注意这⾥匹配的不是item，下⾯你会明⽩为什么）判断该图⽚的链接是否以err开头，第⼀次触发error当
然不是了。王石老婆是谁
3. 那么执⾏this.$set(this.imgList, index, ‘err’ + item)，当然err是⾃⼰拼接上去的，你可以拼接成任何你喜欢的东西只要和真正图⽚路径开
头不⼀致即可。
4. List item这时imgList列表更新重新赋值失败图⽚的src，当然这次⼀定会再触发error，因为链接上拼接了err
5. 这次会执⾏if⾥的语句this.$set(this.imgList, index, this.imgList[index].slice(3))，把截掉err的链接重新赋值回imgList，imgList更新⼜赋
值链接给图⽚，到⽬前为⽌该图⽚已经重新请求了⼀次正确的地址，正常情况下图⽚会成功渲染。
6. 但是，万⼀链接本⾝是错误的，就像上边imgList⾥的数据是不可能请求到图⽚的。。。
7. 如此，就会陷⼊循环地狱，once只能对同⼀个错误拦截，拼接err链接改变了下⼀次⼜截取掉了，所以会⽆限循环下去，之前⼀切的努
⼒都付之⼀炬了。。。
8. 执⾏报错函数else条件⾥的判断就是解决这个问题的，，!bj[item]判断data⾥定义好的errobj对象⾥是否存在该条链接，不存在
则保存在errobj⾥对应的值为1。
9. errobj⾥存在该链接则判断其值，这⾥条件为⼤于2则return掉，否则其值加1，这样的话加载失败的链接⽆论失败多少次（除了⾸
次），都有最多3次请求的机会，超过3次链接不会拼接err，失败的error就不会再触发。
10. 使⽤errobj对象保存每条加载失败的链接好处就是⽆论页⾯有多少图⽚加载失败，每⼀张都还有3次加载的机会，也能解决掉循环地狱
的问题。
11. 如果你的⽹速超慢，请求3次都不成功，那么可以尝试条件放⼤点，请求5次10次。如果还失败，建议不要做⽆谓的挣扎了，毕竟⼀张
图⽚单独请求10次还不成功，怀疑它是不是图⽚。
项⽬中需要展⽰的图⽚超多，经常会出现加载失败的情况，记录该问题解决⽅案。
发布评论