实现 el-image 大图预览时的懒加载

1、问题说明

由于项目使用的图片分为缩略图(small)和完整图(full)，图片展示时使用缩略图，当用户点击图片后展示相应的完整图，el-image 展示完整图需要为 preview-src-list 参数传递一个图片数组，后续使用过程中发现当点击图片展示对应的完整图时 ，会将 preview-src-list 传递的图片数组中的所有图片全部加载，影响了当前图片的加载速度及不必要的资源消耗，考虑到用户可能只是想要查看当前图片的完整图，并且保留图片的切换功能，而无需将所有的完整图全部加载，因此考虑将修改图片的加载策略，当用户点击图片只加载对应的完整图。

2、需求说明

• 有两种图片需要加载，缩略图(small)和完整图(full)
• 需要缩略图对应的大图预览(显示完整图)，并且预览时保留图片的切换功能
• 只加载当前点击的图片对应的完整图，无需将其他图片的完整图全部加载

3、修改前

通过观察动图可以发现，当查看图片的完整图时，不仅会请求当前图片的完整图，还会请求其他图片的完整图。

对应源码：

<template>
    <div v-for="(img, index) in imgsInfo" :key="img.small">
        <el-image 
        :src="img.small" 
        lazy 
        loading="lazy" 
        fit="contain" 
        :preview-src-list="previewImagesList" 
        :initial-index="index" 
        :hide-on-click-modal="true">
        </el-image>
    </div>
</template>

<script setup>
const imgsInfo = ref([{
    "small": "http://xxx/id/small.jpg"
    "full": "http://xxx/id/full.jpg"
},{...}])

// 获取图片的完整图列表
const previewImagesList = computed(() => {
    return imgsInfo.map((item) => item.full);
});
</script>

4、解决方案

<div v-for="(img, index) in imgsInfo" :key="img.small">
    <el-image
        :src="img.small"
        lazy
        loading="lazy"
        fit="contain"
        :preview-src-list="previewImagesList"
        :initial-index="index"
        :hide-on-click-modal="true"
        @switch="previewImages"
        @show="previewImages(index)"
    ></el-image>
</div>

const imgsInfo = ref([{
    "small": "http://xxx/id/small.jpg"
    "full": "http://xxx/id/full.jpg"
},{...}])

// 图片数据初始化，创建一个新的数组并初始化为空值 => ['','',...]
const previewImagesList = computed(() => {
    return new Array(imgsInfo.length).fill("");
});

// 为完整图列表赋值
const previewImages = (index) => {
    if (!previewImagesList.value[index]) {
        previewImagesList.value[index] = imgsInfo[index]["full"];
    }
};

代码说明：由于 el-image 的 preview-src-list 参数需要一个完整图数组，但是如果将完整图列表传递进去将会导致列表中的图片全部被加载，因此此处先初始化一个数组，并根据 imgsInfo 的图片数量进行空字符串占位，之所以需要用空字符串占位是因为大图预览时还需要保留切换功能，通过点击(@show)或切换(@switch)时传递的 index 参数进行完整图链接的赋值。

5、最终效果展示