vue用el-dialog 展示图片

在Vue中，如果你想使用Element UI库中的`el-dialog`组件来展示图片，可以先确保你已经安装并引入了`element-ui`。接下来，创建一个`el-dialog`，并在其中插入一个`img`标签。下面是一个基本的例子：

<template>
  <el-dialog title="图片展示" :visible.sync="dialogVisible">
    <img :src="imageSrc" alt="图片描述" />
    <!-- 可以添加关闭按钮或其他内容 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ElButton, ElDialog } from "element-plus";

export default {
  components: {
    ElButton,
    ElDialog,
  },
  data() {
    return {
      dialogVisible: false, // 控制弹框是否显示
      imageSrc: '默认图片路径', // 图片初始源，可以是静态路径或网络链接
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    }
  },
};
</script>

在上述代码中，`dialogVisible`控制对话框的显示隐藏，`imageSrc`则是图片的URL。点击“关闭”按钮时，`closeDialog`方法会被触发，关闭对话框。