最近使用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: () => {}
}
},
这样就可以直接引这个组件实现了
<img class="question-image" :src="oDetails.src" @click="onPreview" />
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="oDetails.srcList"
/>
// 导入组件
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;
};
});
},
功能是实现了,不知道有没有刚好的解决办法,希望大家指正,谢谢。