NextJS导出项目后图片无法加载的问题咨询及解决请求

问题详情 #

使用Next.js开发项目，PromoBanner组件代码如下：

import React from "react";

export default function PromoBanner() {
  return (
    <section className="container mt-4 mb-grid-gutter">
      <div className="bg-faded-info rounded-3 py-4">
        <div className="row align-items-center">
          <div className="col-md-5">
            <div className="px-4 pe-sm-0 ps-sm-5">
              <span className="badge bg-danger">Limitli Süre</span>
              <h3 className="mt-4 mb-1 text-body fw-light">Small Title</h3>
              <h2 className="mb-1">En Son Teknoloji</h2>
              <p className="h5 text-body fw-light">
                product Title
              </p>
              <a className="btn btn-accent" href="#">
                Btn Text
                <i className="ci-arrow-right fs-ms ms-1" />
              </a>
            </div>
          </div>
          <div className="col-md-7 d-flex align-items-center justify-content-center">
            <img
              src="/general/01.png"
              alt="Güç Kontrol"
              className="PromoBannerImage"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

jsconfig.json配置：

{
"compilerOptions": {
  "baseUrl": "."
}
}

图片存放在public/general目录，执行next export生成静态项目后，图片无法加载（Network面板无请求）；改为./general/01.png后，刷新页面图片仅显示1秒即消失。

解决方案 #

1. 遵循Next.js静态资源路径规则 #

Next.js静态导出时，绝对路径需配合正确的项目配置：

• 若部署在根目录，确保next.config.js中开启trailingSlash，避免路径解析错误：

// next.config.js
module.exports = {
  trailingSlash: true,
}

• 若部署到子路径，需添加basePath配置：

// next.config.js
module.exports = {
  basePath: '/your-subpath',
  trailingSlash: true,
}

2. 使用Next.js官方Image组件（推荐） #

原生<img>在静态导出时可能出现路径适配问题，改用next/image并添加unoptimized属性（静态导出必须）：

import Image from 'next/image';

export default function PromoBanner() {
  return (
    <section className="container mt-4 mb-grid-gutter">
      <div className="bg-faded-info rounded-3 py-4">
        <div className="row align-items-center">
          <div className="col-md-5">
            <div className="px-4 pe-sm-0 ps-sm-5">
              <span className="badge bg-danger">Limitli Süre</span>
              <h3 className="mt-4 mb-1 text-body fw-light">Small Title</h3>
              <h2 className="mb-1">En Son Teknoloji</h2>
              <p className="h5 text-body fw-light">
                product Title
              </p>
              <a className="btn btn-accent" href="#">
                Btn Text
                <i className="ci-arrow-right fs-ms ms-1" />
              </a>
            </div>
          </div>
          <div className="col-md-7 d-flex align-items-center justify-content-center">
            <Image
              src="/general/01.png"
              alt="Güç Kontrol"
              className="PromoBannerImage"
              width={600} // 替换为图片实际宽度
              height={400} // 替换为图片实际高度
              unoptimized
            />
          </div>
        </div>
      </div>
    </section>
  );
}

3. 排查图片短暂显示后消失的原因 #

改为相对路径后图片消失，大概率是以下问题：

• 检查全局JS逻辑：是否有路由切换、DOM重渲染的代码在刷新后移除了图片元素；
• 检查CSS样式：PromoBannerImage类是否存在动态生效的隐藏规则（如display: none、opacity: 0）；
• 验证打包结果：确认out/general/01.png文件是否存在，若缺失需检查Next.js打包配置是否正确包含静态资源。

4. 验证静态导出结果 #

执行next build && next export后，查看out目录：

• 确认out/general/01.png已生成；
• 打开out下的HTML文件，检查图片src属性是否与配置的路径一致。

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