Next.js Next Image在Docker部署的DigitalOcean服务器无法显示求助

1. 检查 Next.js 图片域名权限配置 #

Next Image 组件默认会限制可加载的图片域名，需在 next.config.js 中正确配置：

• 若使用本地静态图片，确认未错误开启 unoptimized（生产环境下静态图片优化默认启用，手动关闭会导致加载异常）
• 若使用远程图片，确保 domains 包含图片来源域名，或用更严谨的 remotePatterns 配置：

// next.config.js 示例配置
module.exports = {
  images: {
    // 针对固定域名的配置
    domains: ['your-image-host.com'],
    // 推荐的模式匹配配置
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-image-host.com',
        pathname: '/**',
      },
    ],
  },
};

2. Docker 容器内静态资源路径与权限检查 #

• 确认 Dockerfile 中正确复制了 public 目录（Next.js 本地静态图片默认存放目录）：

# 构建阶段复制源码并构建
COPY . .
RUN yarn build

# 运行阶段确保静态资源目录被正确复制
COPY --from=builder /app/public /app/public

• 进入容器检查 public 目录权限，确保 Next.js 进程拥有读取权限：

# 进入容器执行命令
ls -la /app/public

3. DigitalOcean 服务器代理/路由配置验证 #

若使用 Nginx 或负载均衡，需确认：

• 代理请求时传递了正确的 Host 头，Next.js 依赖该头验证图片域名合法性
• /_next/image 路径未被错误拦截，确保图片优化请求能正常到达 Next.js 服务

4. 图片优化服务网络与文件检查 #

• 若使用远程图片，进入容器测试能否正常访问图片源地址：

curl -I https://your-image-host.com/path/to/image.jpg

• 若使用本地图片，检查构建后 .next/static/images 目录是否生成了优化后的图片文件

5. 结合报错信息定向排查 #

根据你提供的报错截图，重点对应以下场景：

• 出现 Invalid src prop：对应图片域名未加入权限配置
• 出现 404 错误：对应静态资源路径不存在或权限不足
• 出现 500 错误：对应图片优化服务运行异常

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