Nuxt 3静态构建时Nuxt Image未处理外部Freeda图片求助

针对你遇到的nuxt generate后外部图片仍保留原路径、未下载到/_ipx目录的问题，可按以下步骤排查修复：

1. 配置@nuxt/image的静态生成规则与域名白名单 #

在nuxt.config.ts的image配置中，必须明确允许外部图片域名，并启用静态下载选项：

export default defineNuxtConfig({
  // ...其他配置
  image: {
    providers: {
      freeda: {
        provider: '~/providers/freeda.ts',
      }
    },
    // 启用静态生成时的图片下载逻辑
    staticOptions: {
      dir: '_ipx',
      baseURL: '/_ipx/'
    },
    // 添加外部图片域名到白名单，否则Nuxt会跳过处理
    domains: ['api.test.freeda.cloud'],
    format: ['webp', 'png']
  }
})

2. 修改自定义Provider实现逻辑 #

原Provider直接拼接完整外部URL，导致IPX无法识别并代理下载。调整Provider，让它返回baseURL和相对路径，交由IPX处理：

import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

// 明确映射Freeda支持的图片操作参数
const operationsGenerator = createOperationsGenerator({
  keyMap: {
    format: 'format',
    width: 'w',
    height: 'h'
  }
})

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL }) => {
  const operations = operationsGenerator(modifiers)
  return {
    // 返回相对路径+操作参数
    url: src + (operations ? '?' + operations : ''),
    // 指定外部源的baseURL，让IPX知道从哪里下载图片
    baseURL: baseURL || useRuntimeConfig().public.MEDIA_BASE
  }
}

3. 确保静态生成配置正确 #

检查nuxt.config.ts的generate选项，确保爬虫能覆盖所有包含图片的页面：

export default defineNuxtConfig({
  // ...其他配置
  generate: {
    crawler: true, // 默认启用，确保爬取所有静态页面
    // 若使用动态路由，需手动指定路由列表，避免遗漏图片
    routes: async () => {
      // 示例：返回所有动态路由路径
      // return ['/post/1', '/post/2']
    }
  }
})

4. 排查模板与缓存问题 #

• 确保NuxtImg未添加skip-ssr属性，否则会跳过服务端/静态生成处理
• 清理缓存后重新构建：

rm -rf .output node_modules/.cache
npm run generate

5. 版本兼容性检查 #

当前使用的@nuxt/image@1.6.0与nuxt@3.9.1存在部分静态生成逻辑的兼容性问题，可尝试升级到最新稳定版：

npm install @nuxt/image@latest

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