解决el-image中预览图片功能顺序问题

简介: 解决el-image中预览图片功能顺序问题

在使用el-image的时候用到了预览图片

点击图片进行预览显示的不对,比如点击第2个显示第一个,解决此问题可以用以下来解决

也就是下标的问题

在使用这个的时候我们一般会配合v-for来进行使用

<el-image
            preview-teleported
            v-for="(item,index) in table.code_img"
            :key="item"
            style="width: 70px; height: 70px; margin: 0 10px 0 0"
            :src="domain + item"
            :zoom-rate="1.2"
            :preview-src-list="code_imgs"
            :initial-index="index"
            fit="cover"
          />

把此属性的值设置为v-for循环的index即可

相关文章
|
4月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
165 1
|
5月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
203 2
|
6月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
479 1
|
6月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
6月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
|
JavaScript 前端开发
Base64图片页面显示
Data URI scheme 是一种将小容量数据直接嵌入到文档中的技术。将 Base64 编码的图片数据直接嵌入到 img 标签的 src 属性中,如下所示:
158 0