在el-dialog中展示图片

在 `el-dialog` 中展示图片，可以使用 `el-image` 组件。以下是一个使用 `el-image` 组件的示例代码：

<el-dialog title="图片展示" :visible.sync="dialogVisible">
  <el-image src="https://example.com/image.jpg"></el-image>
</el-dialog>

在这个示例中，使用了 `el-image` 组件来展示一张图片。`src` 属性指定了要展示的图片路径。`dialogVisible` 是一个布尔类型的变量，用于控制 `el-dialog` 的显示和隐藏。

如果想要在 `el-dialog` 中展示本地图片，需要将图片转换为 `base64` 编码，并将编码后的字符串作为 `src` 属性的值。以下是一个使用本地图片的示例代码：

<el-dialog title="图片展示" :visible.sync="dialogVisible">
  <el-image :src="imageData"></el-image>
</el-dialog>

在这个示例中，使用了 `imageData` 变量作为 `el-image` 组件的 `src` 属性的值。`imageData` 变量的值应该是一个包含图片数据的 `base64` 编码字符串。可以使用 JavaScript 的 `FileReader` 对象将本地图片转换为 `base64` 编码字符串。以下是一个转换本地图片的示例代码：

const file = document.querySelector('input[type="file"]').files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
  this.imageData = reader.result;
};

在这个示例中，使用了 `FileReader` 对象将本地图片转换为 `base64` 编码字符串，并将编码后的字符串赋值给 `imageData` 变量。注意，这个示例中假设有一个 `input[type="file"]` 元素用于选择本地图片。