React（Next.js）中CSS文件加载图片失败问题排查

以下是几个常见问题点及解决办法：

• 核对文件路径与名称：确认public根目录下确实存在hero.jpg，特别注意文件名大小写——在Linux或macOS环境下，Next.js会严格区分大小写，比如Hero.jpg和hero.jpg会被识别为不同文件。
• 检查CSS文件加载逻辑：如果是全局CSS（需在_app.js/_app.tsx中导入），你的路径写法是正确的；如果是组件级CSS Module，路径规则同样适用，但要确认该CSS文件已被正确导入到对应组件中。
• 清除浏览器缓存：旧资源缓存可能导致图片无法加载，尝试强制刷新页面（Windows按Ctrl+F5，Mac按Cmd+Shift+R），或直接清除浏览器缓存后重试。
• 验证图片文件完整性：打开hero.jpg确认文件本身未损坏，能正常显示。
• 重启开发服务器：Next.js的热更新偶尔会出现异常，停止当前服务后重新执行npm run dev启动服务，再检查图片是否加载。

你的当前代码：

background-image: url('/hero.jpg');

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