el-image 大图预览

el-image是一个基于Element UI的图片组件，可以用于显示图片并支持大图预览。要实现el-image的大图预览功能，可以按照以下步骤进行操作：

1.在页面中引入Element UI组件库和相关样式文件。

2.在el-image标签中设置属性v-preview-src-list，将其绑定到一个方法上，该方法返回一个包含所有图片地址的数组。

3.在该方法中，将当前点击的图片地址放在数组的最前面，以便在预览时首先显示该图片。

4.在el-image标签中设置属性v-preview-src-index，将其绑定到一个变量上，该变量表示当前点击的图片在数组中的下标。

5.点击图片时，会自动触发大图预览功能，预览时会显示所有图片，并以当前点击的图片为起点进行预览。

以下是一个el-image大图预览的示例代码：

<template>
  <div>
    <el-image
      v-for="(item, index) in imgList"
      :key="index"
      :src="item"
      style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
      :preview-src-list="getPreviewList(item, index)"
      :preview-src-index="previewIndex"
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        'https://picsum.photos/200/300?random=1',
        'https://picsum.photos/200/300?random=2',
        'https://picsum.photos/200/300?random=3',
        'https://picsum.photos/200/300?random=4',
        'https://picsum.photos/200/300?random=5'
      ],
      previewIndex: 0
    }
  },
  methods: {
    getPreviewList(item, index) {
      let arr = [...this.imgList]
      arr.splice(index, 1)
      arr.unshift(item)
      return arr
    }
  }
}
</script>