foster-pc-vue/src/views/home/album/album_compoents/cacheImg.js

// 创建一个全局的图片缓存
const imageCache = new Map();

function loadImage(url, key) {
    return new Promise((resolve, reject) => {
        // 检查缓存中是否存在该key的图片
        if (imageCache.has(key)) {
            resolve(imageCache.get(key));
            return;
        }

        // 如果缓存中没有，则创建一个新的图片对象
        const img = new Image();
        img.src = url;
        img.crossOrigin = 'anonymous';

        img.onload = () => {
            // 图片加载完成后，将其存入缓存
            imageCache.set(key, img);
            resolve(img);
        };

        img.onerror = (error) => {
            reject(error);
        };
    });
}

// 使用示例
loadImage(require('@/assets/watermark/feiniao.png'), 'feiniao')
    .then((img) => {
        // 在这里使用加载完成的图片
        // console.log('图片加载成功', img);
    })
    .catch((error) => {
        console.error('图片加载失败', error);
    });
loadImage(require('@/assets/watermark/fushe.png'), 'fushe')
    .then((img) => {
        // 在这里使用加载完成的图片
        // console.log('图片加载成功', img);
    })
    .catch((error) => {
        console.error('图片加载失败', error);
    });
loadImage(require('@/assets/watermark/shidu.png'), 'shidu')
    .then((img) => {
        // 在这里使用加载完成的图片
        // console.log('图片加载成功', img);
    })
    .catch((error) => {
        console.error('图片加载失败', error);
    });
loadImage(require('@/assets/watermark/temp.png'), 'temp')
    .then((img) => {
        // 在这里使用加载完成的图片
        // console.log('图片加载成功', img);
    })
    .catch((error) => {
        console.error('图片加载失败', error);
    });

loadImage("https://birdseye-img.sysuimars.com/birdseye-look-mini/base_map/90378.jpg", 'base_map')
    .then((img) => {
        // 在这里使用加载完成的图片
        // console.log('图片加载成功', img);
    })
    .catch((error) => {
        console.error('图片加载失败', error);
    });


export { imageCache ,loadImage};