// 创建一个全局的图片缓存 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};