img加载失败时,限制onerror执行次数
在vue中,图片加载失败时,用onerror重复请求10次,如果还是失败,则替换为默认图片的实现html:<el-table-column prop="imageUrls" label="底库照片"><template slot-scope="scope"><div c
·
在vue中,图片加载失败时,用onerror重复请求10次,如果还是失败,则替换为默认图片的实现
<el-table-column prop="imageUrls" label="底库照片">
<template slot-scope="scope">
<div class="image-container" v-for="i in scope.row.images">
<img style="width: 70px; height: 70px" :src="i.url" @error="errorImageList(i)">
<div class="cover-image" v-show="i.isCover">封面照</div>
</div>
</template>
</el-table-column>
errorImageList(e){
setTimeout(function () {
let index = e.url.split('=')[1];
if(index == undefined){
e.url = e.url + '?timestemp=10';//请求时加上时间戳,防止缓存在
} else if(parseInt(index)>0){
e.url = e.url.split('?')[0]+'?timestemp='+(parseInt(index)-1);//重复请求10次
}else{
e.url = defaultImg//默认图片
}
}.bind(this), 1000);
},
更多推荐
已为社区贡献2条内容
所有评论(0)