vue-photo-preview踩坑，el-table中一张错误图片导致全部图片无法放大，并且与懒加载v-lazy不兼容

本文链接：https://blog.csdn.net/weixin_43951592/article/details/124401766

需求：el-table中展示的图片，可以点击放大，并且使用懒加载（偶尔会有404的图片路径）

坑一：一张404图片会导致全部图片无法放大，用@error解决

坑二：但是马上发现如果用了vue-lazyload，则一定不会触发@error，改用原生img懒加载属性，如下图所示：

在这里插入图片描述
完整代码

<el-table-column
         label="图片"
          width="100">
           <template v-slot="scoped">
               <div class="imgDiv" >
                  <img v-show="!scoped.row.violation"
                  	  loading="lazy"
                      :src="scoped.row.url" 
                      :large="scoped.row.url"
                      :preview="scoped.row.url" preview-text=""
                      @error="errorImg(scoped.row)"
                      >
               </div>
          </template>
</el-table-column>

errorImg(row){
	//这里必须用$set
     this.$set(row, "violation" ,true)
      // 这里要延时处理
      setTimeout(()=>{  
       this.$previewRefresh();
      },1000)
  }