NextJs中无法显示public文件夹内图片问题求助

针对你遇到的public文件夹内图片无法通过Next.js Image组件显示的问题，可按以下步骤排查解决：

• 核对路径与文件名
  确保图片确实存放在项目根目录的public文件夹下，路径为public/large_logo.png（代码中使用正斜杠/而非Windows的反斜杠\）。同时注意文件名大小写，Next.js在类Unix系统（Linux/macOS）下对大小写敏感，需保证代码中src="/large_logo.png"与实际文件名完全一致。

• 清除缓存重启服务
  旧缓存可能导致资源加载异常，执行命令清除缓存并重启开发服务器：

  # Linux/macOS
  rm -rf .next && npm run dev
  
  # Windows
  rd /s /q .next && npm run dev
  

• 排查样式干扰
  暂时移除组件的className属性，测试基础Image组件是否能正常显示：

  <Image
    src="/large_logo.png"
    alt="Logo"
    width={40}
    height={40}
  />
  

  若能显示，再逐步添加样式类，排查是否有样式导致图片被隐藏或覆盖。

• 确认Next.js配置与版本
  若使用Next.js 13+ App Router，确保next.config.js中未错误配置images.unoptimized: true（静态导出场景除外）。本地public目录下的图片无需配置images.domains，该配置仅针对外部图片。

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