当前位置：首页 > 前端教程

elementui image

2026-03-06 03:08:04前端教程

Element UI Image 组件

Element UI 的 Image 组件用于在网页中展示图片，支持懒加载、占位图、预览等功能。以下是一些常见用法和配置：

基本用法

<el-image :src="url"></el-image>

url 是需要展示的图片地址。

占位内容 当图片加载时，可以显示占位内容：

<el-image :src="url">
  <div slot="placeholder" class="image-slot">
    加载中<span class="dot">...</span>
  </div>
</el-image>

图片预览 添加 preview-src-list 属性可以开启预览功能：

<el-image 
  :src="url" 
  :preview-src-list="srcList">
</el-image>

srcList 是预览图片的数组。

懒加载 设置 lazy 属性开启懒加载：

elementui image

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

图片适应方式 通过 fit 属性控制图片如何适应容器：

<el-image 
  :src="url" 
  fit="cover">
</el-image>

可选值包括 fill, contain, cover, none, scale-down。

组件属性

src: 图片地址（必填）
fit: 图片适应方式
alt: 替代文本
referrer-policy: 引用策略
lazy: 是否懒加载
scroll-container: 懒加载的滚动容器
preview-src-list: 预览图片列表
z-index: 预览时的 z-index

事件

elementui image

load: 图片加载成功触发
error: 图片加载失败触发

样式定制 可以通过 CSS 覆盖默认样式：

.el-image {
  border-radius: 4px;
}
.el-image__inner {
  transition: all 0.3s;
}

常见问题解决方案

图片加载失败 添加错误处理：

<el-image 
  :src="url" 
  @error="handleError">
</el-image>

methods: {
  handleError() {
    this.url = 'fallback-image.jpg'
  }
}

自定义预览行为

data() {
  return {
    previewVisible: false,
    previewList: ['large1.jpg', 'large2.jpg']
  }
}
methods: {
  showPreview() {
    this.previewVisible = true
  }
}

响应式图片 结合 CSS 实现响应式：

.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 比例 */
  position: relative;
}
.el-image {
  position: absolute;
  width: 100%;
  height: 100%;
}