解决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即可

相关文章
|
3月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
101 0
|
4月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
121 2
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
|
4月前
|
JavaScript 前端开发
详尽分享解决img的src属性为空时会有边框的情况
详尽分享解决img的src属性为空时会有边框的情况
152 0
|
5月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
383 1
|
5月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
5月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)