在模板中添加按钮或其他触发元素,当点击这些元素时调用changeImage方法,从而实现el-image动态加载本地图片的功能。 通过以上步骤,你就可以在Vue项目中使用Element UI的el-image组件动态加载本地图片了。注意,由于Webpack的限制,require函数中的路径必须是静态字符串,因此动态路径需要通过其他方式实现,例如预先导入所有可能的图片并使用对象进行映射。
默认需要使用el-image 标签点击图片才可以预览图片 <el-image :src="url" :preview-src-list="srcList" :initial-index="4" /> JavaScript Copy 实现原理,点击图标动态修改preview-src-list 与 initial-index 参数 html <el-image id="elImg" style="height: 0px;overflow: hidden;" src="放一个有效的...
解决方案:将el-image换成HTML的自有标签即可,这样就不会有闪烁了。
el-image--之初始化加载动态图片显示加载失败 列表 左侧展示大图用了el-image 初始化的第一张图片各种加载失败;尝试了各种办法都无果 最后迫于无奈用了轮播 会默认展示第一张图片! 后来写别的地方 用了原生的img标签,所以又返回来试了下img标签 结果是可以的 --! 至此 也没明白el-image为什么拿到了数据初始化...
下图是获取数据的 图片的地址是可以正常访问的,如果加载失败,手动刷新的,就可以正常访问了! <el-image v-if="infoDetails.Url" alt="图片" :src="infoDetails.Url" :preview-src-list="[infoDetails.Url]"></el-image> 加载中...
动态返回的数据,回显图片加载失败,使用了懒加载也不行,异步加载没有刷新 解决: 使用v-if,图片存在时再渲染 <el-imagestyle="width: 100px; height: 100px"lazyv-if="add_form_dialog.img":src="add_form_dialog.img":preview-src-list="[add_form_dialog.img]"></el-image>加载中......
下图是获取数据的 图片的地址是可以正常访问的,如果加载失败,手动刷新的,就可以正常访问了! <el-image v-if="infoDetails.Url" alt="图片" :src="infoDetails.Url" :preview-src-list="[infoDetails.Url]"></el-image> 加载中...