elementUi 中图片预览功能

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

<template>
  <div>
    <!-- 循环显示图片列表 -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="(item, index) in imageList" :key="index">
        <el-image
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="imageList"
        ></el-image>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 假设有一个图片列表
      imageList: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg',
        'http://example.com/image3.jpg'
      ]
    };
  }
};
</script>

在这个例子中，el-image组件用于显示图片，并通过:preview-src-list属性指定一个包含图片 URL 的数组，这个数组用于在点击图片时呈现预览图片的列表。

确保你已经在项目中安装并引入了Element UI，并且正确地在Vue实例中使用了Element UI。