vue里面通过elementUI组件实现图片预览

在Vue中使用Element UI组件库实现图片预览，可以使用el-image组件。以下是一个简单的例子：

1. 首先确保你已经安装了Element UI并在你的Vue项目中引入了它。
2. 在你的Vue组件中，使用el-image组件来显示图片，并结合el-dialog组件实现图片的弹窗预览。

<template>
  <div>
    <!-- 图片列表 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(img, index) in images" :key="index">
        <el-image
          style="width: 100%; height: 150px"
          :src="img"
          :preview-src-list="images"
        ></el-image>
      </el-col>
    </el-row>
 
    <!-- 图片预览的对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <el-image style="width: 100%; height: 600px" :src="currentImage" fit="contain"></el-image>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      images: [
        'http://path-to-your-image1.jpg',
        'http://path-to-your-image2.jpg',
        // ... 更多图片路径
      ],
      currentImage: '', // 当前显示的图片
      dialogVisible: false, // 控制预览对话框的显示
    };
  },
  methods: {
    // 点击图片时触发的方法
    handlePreview(imgSrc) {
      this.currentImage = imgSrc;
      this.dialogVisible = true;
    },
  },
};
</script>

在这个例子中，images数组包含了所有图片的URL。el-image组件的:preview-src-list属性接受一个数组，当用户点击图片时，会显示一个预览的弹窗，用户可以通过点击左右箭头浏览其他图片。handlePreview方法用于设置当前显示的图片和显示预览对话框。