使用create-react-app的React项目导入PNG图片报未知文件扩展名错误

以下是针对该问题的排查与解决步骤：

• 检查项目配置是否被修改
  create-react-app默认自带图片资源处理能力，如果你手动执行过eject命令，或是用react-app-rewired等工具修改过webpack配置，可能误删了图片处理规则。若是eject后的项目，打开webpack.config.js，确认module.rules中存在处理图片的规则：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
}

未执行eject的话，尽量不要修改默认配置，避免破坏官方的资源处理逻辑。

• 验证文件路径与命名
  确认./imgs/xxx.png的路径完全正确，注意系统大小写（Linux/macOS区分大小写，Windows不区分），检查imgs文件夹是否在当前.js文件的同级目录，文件扩展名确实是.png而非.PNG或其他拼写错误。

• 升级Node.js版本
  部分旧版Node.js对ES模块导入图片的兼容性存在问题，建议升级到项目package.json中engines字段推荐的版本（通常为16.x及以上）。

• 重启开发服务器
  缓存可能引发异常问题，关闭当前的开发服务器，重新执行npm start或yarn start后再测试导入是否正常。

• 重装项目依赖
  删除node_modules文件夹和package-lock.json（或yarn.lock），然后执行npm install或yarn install，确保所有依赖包完整安装，没有缺失资源处理相关的依赖。

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