javascript - 预加载的图像再次加载

Question

我在 componentDidMount 中预加载我的图像，如下所示:

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

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

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

它必须重新加载图像。在我的网络选项卡中，我有 2 个相同的请求来自相同的 URL 相同的图像

具有相同的标题(除了时间 ofc)

Answer 1

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

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 响应 header 。将该值设置为以前的日期将使浏览器不缓存响应。

Expires: <http-date>