el-image图片加载实现

`el-image`是Element Plus库中的一个组件，主要用于显示图片。它采用了懒加载（Lazy Loading）技术来优化图片的加载性能，即只有当图片进入用户的视口范围时才会开始加载。以下是实现的基本步骤：

1. 引入组件：在Vue项目中，你需要首先安装并引入`element-plus`库，然后在模板中导入`<el-image>`组件。

<script setup>
import { ElImage } from "element-plus";
</script>

<template>
  <el-image :src="imageSrc" lazy></el-image>
</template>

2. 设置图片源：`src`属性用于设置图片的URL。

3. 使用懒加载选项：`lazy`是一个布尔属性，当值设为`true`时启用懒加载功能。

4. 动态内容：如果你的图片路径需要动态获取，可以在JavaScript里绑定数据到`src`上。

例如：

let imageUrl = 'initial-path-here';
...
const loadImage = () => {
  imageUrl = 'new-url-or-data';
  // 触发图片更新
  imageSrc = imageUrl;
};

5. 图片加载完成事件：`el-image`提供了`load`或`onLoad`事件，你可以监听这个事件来处理加载完成后的操作。

<template>
  <el-image
    :src="imageSrc"
    lazy
    @load="handleImageLoad"
  ></el-image>
</template>

<script setup>
...
function handleImageLoad() {
  console.log('Image has been loaded');
}
</script>