预加载的图像会再次加载

Question

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

photos.forEach(picture => {

  const img = new Image();

  img.src = picture.url;

});

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

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

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

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

Answer 1

这是预期的行为。为什么？当你做img.src = picture.url;&nbsp;将会有图像请求。下次您再次为img标签分配src-> img src = {photos [0] .url}时，将触发下一个请求。（这次应该来自磁盘缓存）。让图片= photos.map（图片=> <img src = {picture.src} />）;然后渲染此图像变量，如ReactDOM.render（imgs，mountNode）