Next.js执行export导出时自定义Image Loader不生效报错问题

核心问题 #

该报错本质是Next.js在构建导出时检测到仍有使用默认图片优化器的next/image组件存在，即使你认为已经给所有组件加了loader属性，仍大概率存在遗漏的配置项或漏加loader的组件。

排查及解决步骤 #

1. 排查所有Image组件的loader属性
   全局检索项目中所有引用next/image的Image组件，确认每一处调用都传入了loader属性，重点检查：

• 封装的公共图片组件
• 布局组件（如导航栏、页脚）里的图片
• 动态生成内容里引用的图片
  只要有一处未指定loader，Next.js就会触发该报错。

2. 更稳妥的静态导出适配方案（推荐）
   如果你的项目完全走静态导出路线，不需要Next.js内置的图片优化能力，直接在项目根目录的next.config.js中全局关闭图片优化即可，不需要给每个Image组件单独加loader：

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

module.exports = nextConfig

配置完成后重新执行npm run export即可正常导出静态资源。

3. 兼容你现有自定义loader的配置
   如果要保留自定义loader的逻辑，也可以在next.config.js中全局指定自定义加载器，避免每个组件单独引入：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './services/imageLoader.js',
  },
}

module.exports = nextConfig

配置后所有Image组件默认使用该加载器，无需再单独传loader属性。

补充说明 #

你当前的自定义loader逻辑仅提取文件名拼接路径，需要确认所有本地图片打包后确实会输出到./_next/static/media/目录下，避免导出后图片404。

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