NuxtImage 默认从 public/ 目录查找图片，若图片实际位于 assets/img/ 下，需在 nuxt.config.ts 中显式配置 image.dir，并使用相对路径（如 /my-image.jpg）调用 ，否则会因路径解析失败导致 IPX 404。

nuxtimage 默认从 `public/` 目录查找图片，若图片实际位于 `assets/img/` 下，需在 `nuxt.config.ts` 中显式配置 `image.dir`，并使用相对路径（如 `/my-image.jpg`）调用 ``，否则会因路径解析失败导致 ipx 404。

在 Nuxt 3 项目中集成 @nuxt/image 后，许多开发者会遇到 <nuxtimg></nuxtimg> 组件返回 404 (IPX_FILE_NOT_FOUND) 的问题，典型错误请求为：

GET http://localhost:3000/_ipx/_/_nuxt/assets/img/my-image.jpg 404

这并非组件本身故障，而是 Nuxt Image 的默认静态资源解析逻辑与实际文件位置不匹配 所致。

? 根本原因

Nuxt Image（基于 IPX）默认将 public/ 目录作为静态资源根目录。当你写入 <nuxtimg src="_nuxt/assets/img/my-image.jpg"></nuxtimg> 时，IPX 会尝试在 public/_nuxt/assets/img/ 下查找该文件——但该路径并不存在（assets/ 是构建时处理的源码目录，不会直接映射到 public/）。而原生 <img alt="NuxtImage 404 错误的解决方法：正确配置 image.dir 选项" > 能工作，是因为它依赖浏览器直接请求已由 Vite 构建输出的资源路径（如通过别名或构建后产物），与 IPX 的服务端/构建时图像处理流程无关。

✅ 正确解决方案

1. 配置 image.dir 指向你的图片源目录
   在 nuxt.config.ts 中添加：

   export default defineNuxtConfig({
     modules: ['@nuxt/image'],
     image: {
       dir: 'assets/img' // ← 告诉 IPX：从此目录开始解析 src 路径
     }
   })

2. 使用相对于 assets/img/ 的路径调用 <nuxtimg></nuxtimg>
   配置生效后，src 应省略前缀，仅写文件名或子路径（以 / 开头表示相对于 dir）：

   <!-- 正确：/my-image.jpg → 对应 assets/img/my-image.jpg -->
   <NuxtImg src="/my-image.jpg" />
   
   <!-- 或带子目录 -->
   <NuxtImg src="/icons/logo.svg" />

   ❌ 错误示例（仍会 404）：

   <NuxtImg src="_nuxt/assets/img/my-image.jpg" /> <!-- 路径冗余且语义错误 -->
   <NuxtImg src="my-image.jpg" />                   <!-- 缺少 '/'，IPX 不识别为相对 dir 的路径 -->

⚠️ 注意事项

• image.dir 必须是 assets/ 下的子目录路径（如 'assets/images'、'assets/img'），不可设为 'public'（除非你真把图放 public 里）；
• 修改配置后需重启开发服务器（npm run dev）使 IPX 重新加载配置；
• assets/ 中的图片会被 Nuxt 自动处理（如支持 @/assets/... 导入），但 <nuxtimg></nuxtimg> 的 src 不走模块解析，只依赖 image.dir + 字符串路径拼接；
• 若需兼容多目录，可结合 alias 或使用 static provider，但简单项目推荐统一 dir 配置。

✅ 验证是否成功

启动服务后访问：
http://localhost:3000/_ipx/_/my-image.jpg
若返回处理后的图片（而非 404），说明配置已生效。

通过这一配置，你就能无缝享受 NuxtImage 提供的自动格式优化、尺寸裁剪、响应式 srcset 等能力，同时确保资源精准定位——告别无意义的 404。