预加载的图像再次加载

Question

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

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

但是，当我尝试将图像插入（在另一个组件中）

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

它必须再次加载图像。然后，在“网络”标签中，我有2个相同请求，来自相同URL的相同图像

具有相同的标头（时间c除外）

Answer 1

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

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: <http-date>

Answer 2

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

让图片= photos.map（图片=> ）;
然后将此图像变量渲染为
ReactDOM.render（imgs，mountNode）