图片组件 (Image)

Element-UI 的 Image 组件是一个功能增强的图片容器，它保留了原生 <img> 标签的特性，同时支持懒加载、自定义占位、加载失败处理和图片预览等功能，非常适合在现代 Web 开发中使用。

提示

Image 图片组件官方文档：https://element.eleme.cn/#/zh-CN/component/image (opens new window)

1. 基本用法

基本语法：使用 <el-image> 标签来加载和展示图片，并可通过各种属性来自定义其行为。

<template>
  <el-image
    src="https://example.com/image.jpg"
    fit="cover"
    :lazy="true"
    alt="Example Image">
  </el-image>
</template>

• 图片来源：通过 src 属性指定图片的 URL，与原生 <img> 标签的 src 属性一致。
• 图片适应容器方式：使用 fit 属性控制图片如何适应容器框，支持 fill、contain、cover、none、scale-down 五种模式。
• 懒加载：通过设置 lazy 属性为 true，可以开启图片的懒加载功能，提升页面性能。
• 

Image 属性

参数	说明	类型	可选值	默认值
src	图片源，同原生 <img> 的 src 属性	string	—	—
fit	确定图片如何适应容器框，同原生 object-fit	string	fill / contain / cover / none / scale-down	—
alt	原生 alt 属性，用于描述图片内容	string	—	—
referrer-policy	原生 referrerPolicy 属性，控制图片的 HTTP referrer 信息	string	—	—
lazy	是否开启懒加载，延迟加载图片，只有当图片进入视口时才会加载	boolean	—	false
scroll-container	开启懒加载后，监听 scroll 事件的容器	string/HTMLElement	—	最近一个 overflow 值为 auto 或 scroll 的父元素
preview-src-list	开启图片预览功能，设置图片列表以供预览	Array	—	—
z-index	设置图片预览的 z-index 值，控制预览层级	Number	—	2000
initial-index	图片预览时初始显示的图片的索引，从 0 开始	Number	—	—

Image 事件

事件名称	说明	回调参数
load	图片加载成功时触发	e: Event
error	图片加载失败时触发	e: Error

Image 插槽

名称	说明
placeholder	图片未加载时显示的占位内容
error	图片加载失败时显示的内容

2. 图片组件常用示例

自定义占位内容

在图片加载过程中，使用 placeholder 插槽显示自定义的占位内容，提升用户体验。

<template>
  <el-image
    src="https://example.com/image.jpg"
    lazy
    fit="cover">
    <template v-slot:placeholder>
      <div class="image-placeholder">加载中...</div>
    </template>
  </el-image>
</template>

<style>
.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  color: #ccc;
}
</style>

• 占位内容：使用 placeholder 插槽在图片加载过程中显示自定义内容，如文字提示或占位图标。
• 

图片加载失败处理

通过 error 插槽自定义图片加载失败时的显示内容，如显示替代图片或提示信息。

<template>
  <el-image
    src="https://example.com/invalid-image.jpg"
    fit="contain">
    <template v-slot:error>
      <div class="image-error">加载失败</div>
    </template>
  </el-image>
</template>

<style>
.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  color: #f56c6c;
}
</style>

• 加载失败内容：使用 error 插槽在图片加载失败时显示替代内容，提升用户体验。
• 

开启图片预览

通过 preview-src-list 属性开启图片预览功能，允许用户点击图片后进行全屏预览，并支持在多张图片间切换。

<template>
  <el-image
    :src="images[0]"
    :preview-src-list="images">
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    };
  }
};
</script>

• 图片预览：通过 preview-src-list 属性传入图片数组，用户点击图片时可以全屏预览并在多张图片间切换。

开启图片懒加载

Image 组件的懒加载功能通过设置 lazy 属性来启用。懒加载的图片只有在滚动到可视范围内时才会加载，从而提升页面性能，尤其是在有大量图片的页面中。

<template>
  <div class="image-list" ref="scrollContainer">
    <el-image
      v-for="(image, index) in images"
      :key="index"
      :src="image.src"
      lazy
      :scroll-container="scrollContainerRef"
      fit="cover">
    </el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        { src: 'https://example.com/image3.jpg' },
        // 更多图片
      ]
    };
  },
  computed: {
    scrollContainerRef() {
      return this.$refs.scrollContainer;
    }
  }
};
</script>

<style>
.image-list {
  height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.el-image {
  height: 300px;
  margin-bottom: 20px;
}
</style>

• 懒加载：通过 lazy 属性开启懒加载功能，图片只有在滚动到视口范围内时才会加载，减少不必要的资源消耗。
• 滚动容器：使用 scroll-container 属性指定监听滚动事件的容器，如果未指定，将使用最近的 overflow 值为 auto 或 scroll 的父元素作为容器。

图片适应容器方式

fit 属性用于控制图片如何适应容器框，这个属性与 CSS 的 object-fit 属性类似，提供了五种模式：

1. fill：

   • 说明：图片会拉伸以填满整个容器，可能导致图片变形。
   • 适用场景：适用于需要完全填充容器的场景，不在意图片变形。

2. contain：

   • 说明：图片会缩放以适应容器，并保持宽高比。图片不会被裁剪，容器中可能会出现空白区域。
   • 适用场景：适用于需要完整显示图片内容，但不要求填充容器的场景。

3. cover：

   • 说明：图片会缩放以填满容器，并保持宽高比。图片的某些部分可能会被裁剪，以确保容器被填满。
   • 适用场景：适用于需要完全填充容器，并且容器尺寸可能与图片比例不一致的场景。

4. none：

   • 说明：图片不会缩放或拉伸，而是保持其原始尺寸。如果图片尺寸大于容器，超出部分将被裁剪。
   • 适用场景：适用于想要保持图片原始大小，并且不希望图片被缩放或拉伸的场景。

5. scale-down：

   • 说明：图片将被缩放到最小的尺寸，同时保持宽高比，缩放后的图片不会大于其原始尺寸或容器尺寸。
   • 适用场景：适用于希望图片既不会超过容器，也不会超出图片原始尺寸的场景。

示例：不同 fit 模式的效果

<template>
  <div class="image-demo">
    <el-image
      v-for="fit in fits"
      :key="fit"
      src="https://example.com/image.jpg"
      :fit="fit"
      class="image-item">
      <div slot="error">加载失败</div>
    </el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down']
    };
  }
};
</script>

<style>
.image-demo {
  display: flex;
  justify-content: space-between;
}
.image-item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>

• 填充模式展示：展示了 fit 属性的五种模式如何影响图片适应容器的方式。不同模式在不同的场景下具有各自的优势。

3. 总结

• 图片加载与显示：Image 组件支持多种图片适应容器的方式，并通过懒加载和图片预览功能提升性能和用户体验。
• 自定义占位与错误处理：通过 placeholder 和 error 插槽，可以自定义图片加载过程和加载失败时的显示内容，增加组件的灵活性。
• 图片预览功能：提供了丰富的图片预览功能，用户可以方便地查看高清图片和切换查看多张图片。

Image 组件在图片展示和加载优化方面提供了多种实用功能，适用于需要展示图片并保证性能的场景。通过灵活的插槽和配置，开发者可以根据需求自定义图片的加载过程、错误处理和预览功能，提升用户体验。