我正在componentDidMount像这样预加载我的图像：
photos.forEach(picture => {
const img = new Image();
img.src = picture.url;
});
但是，当我尝试像这样（在另一个组件中）插入我的图像时
<img src={photos[0].url} ... />
它必须再次加载图像。在我的网络选项卡中，我对来自同一 URL 的同一图像有 2 个相同的请求
具有相同的标题（除了时间 ofc）
预加载的图像再次加载
IT技术
javascript
html
reactjs
google-chrome
2021-05-15 18:35:56
2个回答
您可以通过浏览器为静态资源（如图像/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响应标头。将该值设置为上一个日期将使浏览器不缓存响应。
Expires: <http-date>
这是预期的行为。为什么？当你做 img.src = picture.url; 将会发生对图像的请求。下次您再次将 src 分配给 img 标签时 --> img src={photos[0].url} ，因此将触发下一个请求。（这次应该来自磁盘缓存）。
让图像 = photos.map(picture => <img src={picture.src}/>);
然后像ReactDOM.render(imgs, mountNode)一样渲染这个图像变量