React中通过JSON文件导入图片提示找不到模块，求解决建议

嘿，我之前在React项目里也踩过这个坑！你遇到的Error: Cannot find module '/resources/correspondance.png'，本质是Webpack这类打包工具对静态资源的解析逻辑导致的——直接用JSON里的绝对路径，require没法正确定位到文件的实际位置，因为打包时资源会被重命名，而且路径解析是基于当前组件文件的相对位置，不是项目根目录。

给你几个实用的解决方案，按推荐度排序：

方案1：用require.context动态解析资源（最推荐） #

Webpack的require.context可以帮你提前指定资源目录，让它能正确解析动态路径：

1. 首先在组件里定义资源上下文（根据你的实际目录调整路径，比如图片在src/resources下，组件在src/components）：

// 第一个参数是资源目录，第二个是是否递归子目录，第三个是匹配的文件后缀
const imageContext = require.context('../resources', false, /\.(png|jpg|jpeg)$/);

2. 修改JSON里的路径，去掉开头的斜杠，只保留文件名：

"Logo": "correspondance.png"

3. 然后在组件里这样调用：

<img src={imageContext(getLogo[0])} alt='对应图标' />

这样Webpack会提前扫描指定目录下的所有图片，打包时就能正确找到对应的资源了。

方案2：调整JSON路径为相对路径 #

如果不想用require.context，可以直接把JSON里的路径改成相对于组件文件的相对路径：

比如你的组件在src/components/MyComponent.js，图片在src/resources/correspondance.png，那JSON里的路径应该写成：

"Logo": "../resources/correspondance.png"

然后保持原来的require写法：

<img src={require(getLogo[0])} alt='' />

这种方法适合路径固定、不需要大量动态资源的场景，但要注意组件或资源目录结构变动时，路径也要跟着改。

方案3：把图片放在public目录下（无需require） #

如果你的图片不需要Webpack处理（比如不需要压缩、哈希命名），可以把resources文件夹移到项目根目录的public文件夹下，然后直接用绝对路径：

1. 确保文件结构是：public/resources/correspondance.png
2. JSON里的路径保持不变："Logo": "/resources/correspondance.png"
3. 组件里直接使用路径，不用require：

<img src={getLogo[0]} alt='' />

这种方法最简单，但缺点是图片不会被Webpack优化，而且部署时要确保public目录的资源正确上传。

最后检查点 #

• 确认你的resources文件夹实际位置：如果是在src目录下，绝对路径/开头会指向项目根，Webpack肯定找不到；如果是在项目根目录，那要确保它被Webpack配置包含（不过通常根目录的非src文件夹不会被默认处理）。
• 检查拼写：文件名、路径有没有大小写错误（比如Correspondance.png和correspondance.png在Linux系统下是不同的）。

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