vue结合element-ui如何实现图片预览

您好，关于您的问题，可以通过以下步骤实现图片预览：

1. 首先，需要安装并引入 element-ui 组件库和 vue-preview 插件。

2. 在需要实现图片预览的页面中，使用 <el-upload> 组件上传图片，并设置相关属性，如 action、before-upload、list-type 等。

3. 在 <el-upload> 组件的 slot 属性中添加自定义内容，这里可以使用 vue-preview 插件来实现图片预览。具体实现方法如下：

<el-upload
  action="your_upload_url"
  :before-upload="checkImage"
  list-type="picture-card">
  <i slot="default" class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  // 添加自定义内容
  <vue-preview :slides="slides"></vue-preview>
</el-upload>

4. 在 data 中定义 slides 数组，并在 checkImage 方法中动态生成 slides 数组的内容，用于传递给 vue-preview 组件进行图片预览。具体实现方法如下：

data() {
  return {
    slides: []
  }
},
methods: {
  checkImage(file) {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG || !isLt2M) {
      this.$message.error('上传图片只能是 JPG/PNG 格式，且不超过 2MB');
      return false;
    }
    // 生成 slides 数组，并使用 vue-preview 进行图片预览
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = () => {
      this.slides.push({
        src: reader.result
      });
      this.$nextTick(() => {
        this.$refs.preview.open();
      });
    };
  }
}

以上就是使用 vue 结合 element-ui 实现图片预览的方法了，希望能对您有所帮助。