Next.js导出HTML后图片不显示，咨询应使用public还是asset文件夹

在Next.js的静态导出（npm run export）场景下，优先选择public文件夹来存放需要用<img />标签直接引用的图片，原因如下：

• public是Next.js官方指定的静态资源目录，构建（包括导出）时会将该文件夹内的所有资源完整复制到输出的out目录根路径下。用绝对路径引用（比如<img src="/images/photo.jpg" />）时，无论开发环境还是静态导出后的静态页面，都能正确解析路径，不会出现找不到图片的问题。
• 你自定义的asset文件夹（比如src/assets）如果直接用<img />标签的相对路径引用，静态导出后很可能因为路径映射问题导致图片加载失败。Next.js默认不会自动将src下的asset文件夹复制到out目录，除非你额外配置next.config.js，或者采用组件内import导入图片的方式（这种方式适合组件专属的图片，而非全局静态引用）。

具体操作建议 #

• 将需要全局引用、用<img />标签直接加载的图片，统一放到public文件夹，可按类型建子目录分类（比如public/images、public/icons）。
• 引用时务必使用绝对路径，示例：

  <img src="/images/avatar.png" alt="用户头像" />
  

• 如果是组件专属的图片，可放在src/assets里，通过import导入后使用，示例：

  import avatar from '../assets/avatar.png';
  <img src={avatar} alt="用户头像" />
  

  这种方式Next.js会自动处理图片优化，静态导出时也会将处理后的图片打包到out目录。

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