React.js 指定路径正确却无法加载本地磁盘图片该如何解决？

API 探路者

2026-10-3

问题排查步骤

校验路径匹配性
你代码中使用import product1 from '../../images/product-1.jpg'的写法，../../代表从当前JS文件的存储目录向上回溯两层，你可以在当前文件中新增一行console.log(product1)，运行项目后打开控制台查看打印出的资源路径，和实际图片可正常访问的路径做比对，确认是否存在路径偏差。
检查文件名大小写
Windows系统对文件名大小写不敏感，但React项目打包后部署在Linux服务器、或是使用Vite等严格校验文件名的构建工具时，大小写不匹配会直接触发加载失败。请确认磁盘中存储的图片文件名（包括后缀，比如是否是.JPG大写后缀、或是.jpeg格式）和你代码中写的完全一致。
确认静态资源存放规则
- 如果你把images文件夹放在src目录下：需要确保目录层级完全匹配，比如当前JS文件存放在src/components/product/目录下，向上回溯两层就是src目录，对应src/images/的路径才是正确的。
- 如果你把images文件夹放在public目录下：不需要使用import语法导入，直接在img标签的src属性中填写绝对路径/images/product-1.jpg即可，import导入public目录下的资源会直接报错。
排查构建工具配置
如果你自定义过webpack或是Vite的配置，需要确认是否配置了jpg格式静态资源的解析规则，是否配置了路径别名导致../../的相对路径解析偏移。