解决Element UI - el-image 图片初始化加载失败问题

最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新，（这个地方需要注意过这个问题的大佬解读下源码，为什么会出现这种情况）所以“加载失败”。试了很久，这个可能是el-image的bug吧，以后需要仔细看看源码怎么实现的。

目前发现有两个解决办法，第一个就是在“:src” 里添加默认图片地址，避免渲染DOM的时候找不到地址导致报错；第二种就是本来我只想要使用他的大图预览功能，我想是不是可以设置成img加载图片，只需要找预览的功能，后来发现Image这块大图预览是个组件叫做image-viewer，查看它的props如下：

props: {
 urlList: {
 type: Array,
 default: () => []
    },
 zIndex: {
 type: Number,
 default: 2000
    },
 onSwitch: {
 type: Function,
 default: () => {}
    },
 onClose: {
 type: Function,
 default: () => {}
    }
  },

这样就可以直接引这个组件实现了

 

// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 
components: { ElImageViewer }

用到的方法： 
onPreview() {
 this.showViewer = true;
},
 // 关闭查看器
closeViewer() {
 this.showViewer = false;
}

这样就实现了预览的功能

还有就是实现预览是点击遮罩实现关闭预览，因为组件没有实现，我希望不改变的情况下实现：

    let t = this;      
    this.showViewer = true;      
    this.$nextTick(() => {        
        document.querySelector(".el-image-viewer__mask").onclick = function() {          
            t.showViewer = false;        
        };      
    });    
},

功能是实现了，不知道有没有刚好的解决办法，希望大家指正，谢谢。