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

在使用Element UI的el-image组件时遇到图片加载失败的问题,可能原因是初始化加载失败且无异步刷新。解决方案包括设置默认图片或使用image-viewer组件实现大图预览。文中详细介绍了如何引入和配置image-viewer组件,并提供了点击遮罩关闭预览的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近使用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: () => {}

}

},

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

v-if="showViewer"

:on-close="closeViewer"

:url-list="oDetails.srcList"

/>

// 导入组件

import ElI

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值