1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Image：
在你的 Vue 组件中导入 Image，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-image
src="https://via.placeholder.com/300"
alt="示例图片"
style="width: 300px; height: 200px;"
></el-image>
</div>
</template>
<script>
import { ElImage } from 'element-plus';
export default {
components: {
ElImage,
},
};
</script>
在上述代码中，我们导入了 ElImage 组件，并在模板中使用它。通过 src 属性设置图片的地址，通过 alt 属性设置图片的替代文本，通过 style 属性设置图片的宽度和高度。
3. 自定义 Image：
你可以根据需要自定义 Image，例如，添加占位符、加载失败的替代内容等：
<template>
<div>
<el-image
src="https://via.placeholder.com/300"
alt="示例图片"
style="width: 300px; height: 200px;"
placeholder="https://via.placeholder.com/50"
error="https://via.placeholder.com/300?text=加载失败"
></el-image>
</div>
</template>
<script>
import { ElImage } from 'element-plus';
export default {
components: {
ElImage,
},
};
</script>
在这个例子中，我们通过 placeholder 属性设置加载图片时的占位符，通过 error 属性设置加载失败时的替代内容。
转载请注明出处：http://www.zyzy.cn/article/detail/5585/ElementPlus