vue3中如何使用el-image

在 Vue3 中，使用 `el-image` 组件需要先安装 Element Plus 插件，可以通过以下命令进行安装：

npm install element-plus --save

安装完成后，在 Vue3 的组件中使用 `el-image` 组件可以按照以下示例进行：

<template>
  <el-image
    style="width: 100px; height: 100px"
    :src="imageUrl"
    :preview-src-list="[imageUrl]"
    alt="图片描述"
  />
</template>

<script>
import { ElImage } from 'element-plus';

export default {
  components: {
    ElImage,
  },
  data() {
    return {
      imageUrl: 'https://picsum.photos/200',
    };
  },
};
</script>

在上面的示例中，我们首先在组件中引入 `ElImage` 组件，然后在 `data` 中定义了一个 `imageUrl` 变量，并且将其绑定到 `el-image` 组件的 `src` 属性上。同时，我们还指定了 `el-image` 组件的宽度和高度为 100px，并且定义了图片的预览列表和图片的描述信息。

需要注意的是，使用 `el-image` 组件时需要确保图片的地址是有效的，否则可能会导致加载失败。