Next.js Image组件在Digital Ocean部署应用中无法加载求助

云上老周

2026-8-2

解决方案

1. 禁用Next.js图片优化（快速解决静态部署场景）

如果你的项目不需要Next.js的图片优化服务，直接在next.config.js里添加unoptimized: true配置，让Image组件降级为普通img标签的加载逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

这样就能和你用传统img标签、MUI Avatar的表现一致，图片正常加载。

2. 配置图片来源白名单（保留优化功能的场景）

如果要保留图片优化，必须在next.config.js里明确允许图片的来源域名或路径：

本地public目录下的图片：确保配置覆盖本地和部署后的域名
外部图片：把第三方域名加入白名单

示例配置：

const nextConfig = {
  images: {
    // 直接列出允许的域名
    domains: ['your-deployed-domain.com', 'localhost'],
    // 或者用更精细的路径匹配
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-deployed-domain.com',
        pathname: '/images/**',
      },
    ],
  },
}

module.exports = nextConfig

3. 检查Digital Ocean部署的静态资源映射

如果是用Docker或自定义服务器部署（而非DO App Platform），要确保服务器配置正确映射静态资源路径。比如Nginx需要添加：

# 映射Next.js编译后的静态资源
location /_next/static/ {
  alias /path/to/your/project/.next/static/;
  expires 1y;
  access_log off;
}

# 映射public目录下的图片
location /images/ {
  alias /path/to/your/project/public/images/;
  expires 1y;
  access_log off;
}

4. 验证图片导入和组件写法

本地public目录图片：用相对路径时要写src="/images/xxx.jpg"，同时Image组件必须带width/height属性（或用fill配合容器）
模块导入图片：比如import myImg from '../public/images/xxx.jpg'，然后src={myImg}，确保构建产物里包含这些图片文件