Next.js导出后图片相对路径变绝对路径，本地打开无图片求助

问题背景 #

执行next build && next export后，图片路径被生成为绝对路径（如/images/tools/js.svg），本地打开index.html时会指向本地文件系统的根目录，而非导出后的out文件夹内的图片资源，导致图片无法加载。当前使用Next.js 13.4.16，Node.js 18.17.1，已尝试开启images.unoptimized、使用Image组件、配置assetPrefix等方法但未解决。

解决步骤 #

1. 更新next.config.js配置 #

添加trailingSlash和assetPrefix配置，强制生成相对路径的资源链接：

const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
    },
    trailingSlash: true, // 让每个页面生成带斜杠的目录结构，避免路径解析异常
    assetPrefix: './', // 为所有静态资源添加相对路径前缀
}

module.exports = nextConfig

2. 调整图片路径写法 #

• 原生<img>标签：将绝对路径/images/tools/js.svg改为相对路径./images/tools/js.svg；若已配置assetPrefix: './'，也可保留原绝对路径，构建时会自动转换为相对路径。
• Next.js Image组件：保持src="/images/tools/js.svg"即可，unoptimized: true配合assetPrefix会自动生成正确的相对路径。

3. 验证构建结果 #

重新执行构建导出命令后，打开out目录下的index.html，检查图片标签的src属性是否已变为./images/tools/js.svg（而非绝对路径）。

额外提示 #

• 若应用需部署到服务器子目录（如https://xxx.com/my-app/），需将assetPrefix改为'/my-app/'，本地测试时临时切换为'./'即可。
• 避免直接使用以/开头的绝对根路径，除非通过assetPrefix完成路径转换。

内容的提问来源于stack exchange，提问作者Дмитрий Бескровный