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

前往低代码交流专区

更多推荐