在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); },