预加载的图像再次加载答案

【问题标题】：preloaded images get loaded again预加载的图像再次加载
【发布时间】：2023-03-23 18:44:01
【问题描述】：

我正在像这样在componentDidMount 中预加载我的图片：

photos.forEach(picture => {
  const img = new Image();
  img.src = picture.url;
});

但是当我尝试像这样插入我的图像时（在另一个组件中）

<img src={photos[0].url} ... />

它必须再次加载图像。然后在我的网络选项卡中，我对来自同一 URL 的同一图像有 2 个相同的请求

具有相同的标题（除了时间）

【问题讨论】：

没有缓存吗？您可以在同一“网络”选项卡中的“大小”列下查看

标签： javascript html reactjs google-chrome

【解决方案1】：

这是预期的行为。为什么？当你做 img.src = picture.url;将会发生对图像的请求。下次您再次将 src 分配给 img 标签时 --> img src={photos[0].url} ，所以会触发下一个请求。（这次应该来自磁盘缓存）。

让 images = photos.map(picture => );
然后像
ReactDOM.render(imgs, mountNode)

渲染这个图像变量

【讨论】：

【解决方案2】：

您可以通过浏览器对静态资源（如图像/CSS/JS 和其他不经常更改的库（如 jQuery 等））启用缓存。尝试为静态资源添加缓存控制响应标头。这些是 cache control 标头的可用值。

Cache-Control: public 
Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-Control: s-maxage=<seconds>

您还可以在提供这些静态资源时添加 expires 响应标头。将值设置为以前的日期将使浏览器不缓存响应。

Expires: <http-date>

【讨论】：

知道了，开发设置自动禁止缓存，这就是我遇到问题的原因