NextJS Image组件无法显示已存在图片问题求助

可能的原因及对应方案 #

1. 构建同步路径错误 #

如果使用GitHub Action+rsync部署，需确保同步的是Next.js构建后的产物目录，而非项目根目录的public文件夹：

• 若为SSR/ISR部署，构建产物是.next文件夹，需同步整个.next目录到服务器的部署路径；
• 若为静态导出（next export），产物是out文件夹，需同步out目录。
  错误同步项目根目录的public会导致Next.js运行时无法正确映射静态资源路径。

2. Image组件配置缺失 #

检查next.config.js的图片配置：

• 若部署在自定义域名下，需在images.domains中添加当前域名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      domains: ['splitfire.ai'],
    },
  }
  
  module.exports = nextConfig
  

• 若使用静态导出（next export），必须开启unoptimized模式，否则Image组件会依赖Next.js的图片优化服务导致路径错误：

  const nextConfig = {
    images: {
      unoptimized: true,
    },
  }
  

3. 服务器文件权限问题 #

rsync同步后，图片文件的权限可能导致Web服务器无法读取：

• 执行命令修正权限：

  chmod -R 644 /path/to/your/deployment/public/static/images
  chmod -R 755 /path/to/your/deployment/public/static/images
  

确保Web服务器进程（如nginx、node）有读取这些文件的权限。

4. 缓存干扰 #

浏览器或CDN的旧缓存可能导致图片无法加载：

• 强制刷新浏览器（Ctrl+Shift+R）清除本地缓存；
• 若使用CDN，需手动刷新CDN缓存，或在部署时给静态资源添加哈希后缀实现缓存击穿。

5. 代码逻辑优化（非直接原因，但可避免潜在问题） #

当前代码中useEffect的switch仅处理dark和light主题，若主题为system等其他值会导致状态未更新，可简化逻辑：

useEffect(() => {
  setLogoSrc(theme === 'light' ? '/static/images/logo-dark.png' : '/static/images/logo.png')
}, [theme])

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