React是否存储并识别图片？重复使用同图会增加带宽消耗吗？

不会多次下载，默认不会额外增加带宽消耗。

核心原因是浏览器自带的缓存机制：

• 只要同一张图片的URL完全一致（包括文件路径、名称、查询参数都没变化），第一次加载后会被存入本地缓存。后续无论在哪个路由、哪个组件里引用这张图，浏览器都会直接从本地缓存读取，不会再向服务器发起下载请求。
• 只有两种例外情况会导致重复下载：一是给图片URL添加了随机变动的查询参数（比如image.jpg?v=12345每次都变）；二是服务器端设置了禁止缓存的响应头（比如Cache-Control: no-cache）。

针对React项目的补充说明：

• 不管是通过import导入图片（比如import avatar from './assets/avatar.png'），还是直接写静态路径，只要打包后生成的图片URL唯一，就会触发浏览器缓存。
• Webpack、Vite这类打包工具默认会给静态资源添加哈希后缀，目的是在图片更新时让浏览器重新获取新文件；但相同的图片只会生成一个带固定哈希的URL，所以依然会被缓存复用。

内容的提问来源于stack exchange，提问作者Murad Taghiyev