vue.js 使用 elementUI 通过for循环实现多个图片大图预览，为什么每次点击其他图片都展示第一张图片

Question

<div id="app">
<div class="demo-image__preview"  v-for="(imgfile) in url">
  <el-image 
    style="width: 100px; height: 100px"
    :src="imgfile.value" 
    :preview-src-list="srcList">
  </el-image>
</div>
</div>

var Main = {
    data() {
      return {
        url: [
{value: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{value: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'}
],
        srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }

图片是通过for循环遍历出来的，但是element的大图预览每次无论点击第几张图片，展示的都是第一张，想让他点击第二张图片就展示对应的第二张图片的大图应该如何操作？感谢

Answer 1

1. 我觉得你没理解src 和preview-src-list 这两个属性的意思。
   preview-src-list是预览的图片数组，虽然你图片显示是v-for渲染了，但是预览的数组是固定的那俩，也就是刚打开预览肯定是显示第一张，点切换按钮就看到第二张了。

1. 你应该是想实现显示两张图片并各自预览

<div id="app">
<div class="demo-image__preview"  v-for="(imgfile) in url">
  <el-image 
    style="width: 100px; height: 100px"
    :src="imgfile.value" 
    :preview-src-list="imgfile.srcList">
  </el-image>
</div>
</div>
var Main = {
    data() {
      return {
        url: [
{value: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'，
srcList:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
},
{value: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
srcList:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'] }
]
      }
    }
  }

Answer 2

你直接用el-image-viewer 这个组件

<template>
    <el-image-viewer
        v-if="showViewer"
        :initialIndex="initialIndex"
        :on-close="closeViewer"
        :url-list="imageList"/>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
    components: { ElImageViewer },
    props: {
        imageList: {
            type: Array,
            require: true
        },
        initialIndex: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            showViewer: false
        }
    },
    methods: {
        show() {
            this.showViewer = true;
            document.body.style.overflow = 'hidden'
        },
        // 关闭查看器
        closeViewer() {
            this.showViewer = false;
            this.$emit('close')
            document.body.style.overflow = ''
        }
    },
}
</script>

Answer 3

因为预览的属性是个数组，它是根据数组中图片的顺序进行预览的。可以把srcList这个属性设置成当前的图片，即：:preview-src-list="[imgfile.value]"