el-image详解

el-image 是 Element Plus 框架中的一个图片组件，用于展示图片，并提供了懒加载、预览等功能。

一。el-image 属性详解

1. src:

   • 类型: String
   • 用途: 图片源地址。

2. alt:

   • 类型: String
   • 用途: 图片的替代文本。

3. fit:

   • 类型: String
   • 用途: 图片的裁剪方式，可选值为 fill、contain、cover、none、scale-down。
   • 默认值: cover

4. lazy:

   • 类型: Boolean
   • 用途: 是否开启懒加载。
   • 默认值: false

5. scroll-container:

   • 类型: String | HTMLElement
   • 用途: 指定滚动容器。

6. preview-src-list:

   • 类型: Array
   • 用途: 预览图片的列表。

7. initial-index:

   • 类型: Number
   • 用途: 预览图片的初始索引。
   • 默认值: 0

8. z-index:

   • 类型: Number
   • 用途: 预览图片的 z-index。
   • 默认值: 2000

二。 el-image 事件详解

1. load:

   • 类型: Function
   • 用途: 图片加载成功时触发的事件。
   • 参数: event（事件对象）

2. error:

   • 类型: Function
   • 用途: 图片加载失败时触发的事件。
   • 参数: event（事件对象）

3. preview:

   • 类型: Function
   • 用途: 图片预览时触发的事件。
   • 参数: index（当前图片的索引）

三。 el-image 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 图片加载失败时的备用内容。

四。示例代码

<template>
  <div>
    <h2>Image 示例</h2>

    <!-- 基本用法 -->
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"
    ></el-image>

    <!-- 图片裁剪方式 -->
    <div class="image-group">
      <el-image
        v-for="fit in fits"
        :key="fit"
        :src="url"
        :fit="fit"
        style="width: 100px; height: 100px; margin: 10px"
      ></el-image>
    </div>

    <!-- 懒加载 -->
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      lazy
    ></el-image>

    <!-- 图片预览 -->
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
    ></el-image>

    <!-- 图片加载失败时的备用内容 -->
    <el-image
      style="width: 100px; height: 100px"
      :src="invalidUrl"
      fit="cover"
    >
      <template #error>
        <div class="image-slot">
          加载失败
        </div>
      </template>
    </el-image>
  </div>
</template>

五。代码解释

1. 基本用法:

   • 使用 el-image 组件并设置 src 和 fit 属性。

   • <el-image
       style="width: 100px; height: 100px"
       :src="url"
       :fit="fit"
     ></el-image>
     

2. 图片裁剪方式:

   • 使用 v-for 循环展示不同的裁剪方式。

   • <div class="image-group">
       <el-image
         v-for="fit in fits"
         :key="fit"
         :src="url"
         :fit="fit"
         style="width: 100px; height: 100px; margin: 10px"
       ></el-image>
     </div>
     

3. 懒加载:

   • 使用 lazy 属性开启懒加载。

   • <el-image
       style="width: 100px; height: 100px"
       :src="url"
       lazy
     ></el-image>
     

4. 图片预览:

   • 使用 preview-src-list 属性启用图片预览功能。

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

5. 图片加载失败时的备用内容:

   • 使用插槽 #error 提供加载失败时的备用内容。

   • <el-image
       style="width: 100px; height: 100px"
       :src="invalidUrl"
       fit="cover"
     >
       <template #error>
         <div class="image-slot">
           加载失败
         </div>
       </template>
     </el-image>