elementui图像

ElementUI 图像组件

ElementUI 提供多种方式处理图像显示，包括 el-image 组件、结合 el-carousel 的轮播图，以及通过 el-avatar 显示头像等。以下是常见用法和示例。

el-image 基础用法

el-image 是 ElementUI 提供的图片容器，支持懒加载、占位图、预览等功能。

<el-image
  style="width: 100px; height: 100px"
  :src="url"
  :fit="cover"
  :preview-src-list="srcList"
></el-image>

• fit 属性控制图片填充方式，可选值：fill（拉伸）、contain（包含）、cover（覆盖）、none（原始尺寸）、scale-down（自适应缩小）。
• preview-src-list 允许点击图片后预览多张图片。

懒加载与占位图

通过 lazy 启用懒加载，placeholder 设置加载中的占位内容：

<el-image
  :src="url"
  lazy
  :placeholder="loadingText"
></el-image>

结合 el-carousel 实现轮播图

el-carousel 可配合 el-image 实现图片轮播效果：

<el-carousel :interval="3000" arrow="always">
  <el-carousel-item v-for="item in imageList" :key="item.id">
    <el-image :src="item.url" fit="cover"></el-image>
  </el-carousel-item>
</el-carousel>

el-avatar 头像显示

el-avatar 用于显示用户头像，支持图片、图标或文字：

<el-avatar :size="50" :src="userAvatar"></el-avatar>

• size 控制尺寸（数值或 large/small）。
• shape 可设为 circle（圆形）或 square（方形）。

注意事项

• 图片路径需确保正确，动态路径建议使用 require 或绝对路径。
• 大图建议启用懒加载优化性能。
• 预览功能依赖 el-image-viewer，需确保引入完整组件库。

通过以上方式，可灵活实现 ElementUI 中的图像展示需求。