如何在React中缓存成功加载的图片并展示（应对404场景）

当然可以实现这个需求！核心思路是先验证图片可用性，将加载成功的图片转为可直接在内存中存储的格式（比如Base64 或 Blob URL），再存入组件状态进行展示。下面是具体的实现步骤和代码示例：

1. 编写图片加载与转换函数 #

首先需要一个异步函数，负责加载单张图片并将其转换为内存可存储的格式。这里提供两种方案，你可以根据需求选择：

方案一：转为Base64字符串（易存储，适合小图） #

// 加载图片并转为Base64格式
const loadAndSaveImage = async (imageUrl) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域问题（如果图片域名和你的站点不同）
    img.crossOrigin = 'anonymous';
    
    img.onload = () => {
      // 创建Canvas来转换图片为Base64
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      // 可指定图片格式，比如image/jpeg，默认是image/png
      const base64Url = canvas.toDataURL('image/png');
      resolve(base64Url);
    };
    
    img.onerror = () => {
      reject(new Error(`加载失败：${imageUrl}`));
    };
    
    img.src = imageUrl;
  });
};

方案二：转为Blob URL（更省内存，适合大图） #

const loadAndSaveImage = async (imageUrl) => {
  return new Promise((resolve, reject) => {
    fetch(imageUrl)
      .then(response => {
        if (!response.ok) throw new Error('图片不存在或无法访问');
        return response.blob();
      })
      .then(blob => {
        const blobUrl = URL.createObjectURL(blob);
        resolve(blobUrl);
      })
      .catch(reject);
  });
};

注意：使用Blob URL时，组件卸载时一定要调用URL.revokeObjectURL()释放内存，避免内存泄漏！

2. 在React组件中批量处理图片 #

你的原代码有个小问题：直接用images.map(saveImage)会返回一堆Promise，而不是实际的图片数据。我们需要用Promise.allSettled来批量处理所有图片，过滤掉加载失败的，只保留成功的结果：

class ImageGallery extends React.Component {
  state = {
    savedImages: []
  };

  async componentDidMount() {
    const images = ['http://example.com/img1.jpg', 'http://example.com/img2.jpg', ...];
    // 并行加载所有图片，不管成功失败都返回结果
    const results = await Promise.allSettled(
      images.map(url => loadAndSaveImage(url))
    );
    
    // 过滤出成功加载的图片数据
    const successfulImages = results
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value);
    
    this.setState({ savedImages: successfulImages });
  }

  // 如果用Blob URL，组件卸载时清理内存
  componentWillUnmount() {
    this.state.savedImages.forEach(url => {
      if (url.startsWith('blob:')) {
        URL.revokeObjectURL(url);
      }
    });
  }

  render() {
    const { savedImages } = this.state;
    return (
      <div className="image-gallery">
        {savedImages.map((imgUrl, index) => (
          <img 
            key={index} 
            src={imgUrl} 
            alt={`已保存图片 ${index + 1}`}
            style={{ width: '200px', margin: '10px' }}
          />
        ))}
      </div>
    );
  }
}

3. 关键注意事项 #

• 跨域问题：如果图片所在域名和你的React应用域名不同，需要确保图片服务器配置了CORS允许你的域名访问，否则会加载失败。
• 内存占用：如果图片数量多或尺寸大，Base64会占用较多内存，此时优先选Blob URL，记得在组件卸载时释放资源。
• 加载效率：Promise.allSettled会并行加载所有图片，不会因为某一张失败而中断其他请求，完美适配你的“图片时好时坏”的场景。

这样就能实现“只展示成功加载并保存到内存的图片”的需求啦！

内容的提问来源于stack exchange，提问作者raphaelrk