NuxtImage 默认从 public/ 目录查找图片，若图片实际位于 assets/img/ 下，需在 nuxt.config.ts 中显式配置 image.dir，并统一使用以 / 开头的相对路径引用资源。
nuxtimage 默认从 `public/` 目录查找图片，若图片实际位于 `assets/img/` 下，需在 `nuxt.config.ts` 中显式配置 `image.dir`，并统一使用以 `/` 开头的相对路径引用资源。
在 Nuxt 3 项目中集成 @nuxt/image 后，直接将 <img alt="NuxtImage 404 错误的根源与正确配置方法" > 替换为 <nuxtimg></nuxtimg> 却遭遇 404（如 GET http://localhost:3000/_ipx/_/_nuxt/assets/img/my-image.jpg 404），根本原因在于 NuxtImage 的默认资源解析逻辑与 assets/ 目录的构建机制不匹配。
<nuxtimg></nuxtimg> 组件底层依赖 IPX（或其它提供者）进行图像处理，其 src 属性默认被解释为相对于静态资源根目录（即 public/）的路径，而非 assets/。而 assets/ 目录中的文件（如 assets/img/my-image.jpg）在构建时并不会被直接复制到输出目录，而是由 Vite/Nuxt 的构建系统编译、哈希、注入，并最终通过模块解析（如 @/assets/...）引入 —— 这正是原 <img src="_nuxt/assets/img/..." alt="NuxtImage 404 错误的根源与正确配置方法" > 能工作的原因（它依赖的是构建后生成的硬编码路径，属于非标准且不可靠的 hack）。
✅ 正确做法是：
-
明确指定图像源目录：在
nuxt.config.ts中配置image.dir，告诉 NuxtImage 哪里去找原始图片：
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
dir: 'assets/img' // ← 关键：指向 assets 下的子目录
}
})-
统一使用根相对路径调用：
<nuxtimg></nuxtimg>的src应省略assets/img前缀，直接以/开头，表示相对于image.dir配置的路径：
<!-- ✅ 正确：NuxtImage 自动拼接 image.dir --> <NuxtImg src="/my-image.jpg" alt="示例图片" /> <!-- ❌ 错误：包含 assets/img 或 _nuxt/ 等构建产物路径 --> <NuxtImg src="assets/img/my-image.jpg" /> <NuxtImg src="_nuxt/assets/img/my-image.jpg" />
⚠️ 注意事项：
-
image.dir必须是assets/下的子目录路径（如'assets/images'、'assets/img'），不能是绝对路径或public/； - 配置后，所有
src值均视为该目录下的相对路径，不支持跨目录引用（如../other-dir/file.jpg）； - 若需混合来源（如部分图来自
public/），可配置多个提供者（provider），但单dir配置最简洁可靠； - 修改配置后务必重启开发服务器（
npm run dev），否则缓存可能导致行为异常。
总结：NuxtImage 并非 <img alt="NuxtImage 404 错误的根源与正确配置方法" > 的无感替代品，而是面向可优化、可服务端处理的静态资源管道。合理配置 image.dir + 规范化 src 路径，是启用响应式图像、格式自动转换、尺寸裁剪等高级特性的前提。
