Create React App项目图片路径正确但无法正常显示问题求助

问题解决方案 #

1. 适配require返回值（最高概率解决问题）

在你使用的CRA 4.x版本中，用CommonJS格式的require引入静态资源时，返回的是ES模块对象，真实的图片路径存放在default属性下。你之前的旧项目版本更低或者做了兼容配置，所以不需要加这个属性。
修改你的img标签代码即可：

<img id="2" src={require('../../../img/logo.png').default} className="img-fluid" alt="logo"/>

2. 改用CRA官方推荐的ES模块导入方式

比require写法更稳定，不会出现模块导出格式不匹配的问题：

// 组件代码顶部先引入图片
import logo from '../../../img/logo.png'

// 渲染时直接使用变量
<img id="2" src={logo} className="img-fluid" alt="logo"/>

3. 其他排查点

• 确认img文件夹存放在项目src目录下，CRA默认只会处理src目录内的静态资源，放在src外的资源无法通过require/import识别
• 检查图片文件名大小写和代码中是否完全一致，Windows系统默认文件名大小写不敏感，旧项目运行在Windows环境下不会报错，而CRA默认开启了文件名大小写校验，不匹配就会加载失败
• 若上述操作都无效，停止当前npm start进程，删除项目下node_modules/.cache文件夹后重新启动开发服务即可

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