使用next export导出后NextJS图片无法显示问题求助

问题原因 #

核心问题出在next.config.js的图片加载器配置不匹配静态导出场景，同时未开启静态导出专属的图片处理模式。本地运行正常是因为开发服务器会自动处理资源路径，但静态导出后缺少服务器端的路径解析支持，导致图片URL生成错误。

解决方案 #

1. 调整next.config.js配置

将原有的Akamai相关配置替换为静态导出适配的设置：

/** @type {import('next').NextConfig} */
const configuration = {
    reactStrictMode: true,
    eslint: {
        dirs: ['./src'],
        ignoreDuringBuilds: true,
    },
    images: {
        unoptimized: true, // 开启静态导出模式的图片处理逻辑
    },
};

module.exports = configuration;

• unoptimized: true：NextJS 12+版本后，静态导出时必须开启此选项，让图片直接作为静态资源输出，绕过服务器端的图片优化逻辑，确保路径正确指向out目录中的资源。
• 移除loader: 'akamai'和path: ''：这两个配置是为Akamai CDN服务的，静态导出场景不需要CDN路径处理，会干扰本地静态资源的路径生成。

2. 重新构建导出

执行以下命令重新生成静态包：

next build && next export

3. 验证资源

检查out目录下是否存在images/some-image.png，同时查看页面中图片的实际URL是否正确指向该文件。

额外说明 #

• 普通img标签的问题也会同步修复，因为导入的图片资源会被正确打包到out目录，路径生成逻辑回归正常。
• 如果应用部署在子目录下，可额外配置basePath参数确保路径正确：

const configuration = {
    // ...其他配置
    basePath: '/your-subdirectory',
    images: {
        unoptimized: true,
    },
};

内容的提问来源于stack exchange，提问作者Amir Ben Shimol