NuxtImage 404 错误的解决方法：正确配置 image.dir 选项-js教程-PHP中文网

NuxtImage 404 错误的解决方法：正确配置 image.dir 选项

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 后，许多开发者会遇到组件返回 404 (IPX_FILE_NOT_FOUND) 的问题，典型错误请求为：

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

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

? 根本原因

Nuxt Image（基于 IPX）默认将 public/ 目录作为静态资源根目录。当你写入时，IPX 会尝试在 public/_nuxt/assets/img/ 下查找该文件——但该路径并不存在（assets/ 是构建时处理的源码目录，不会直接映射到 public/）。而原生能工作，是因为它依赖浏览器直接请求已由 Vite 构建输出的资源路径（如通过别名或构建后产物），与 IPX 的服务端/构建时图像处理流程无关。

✅ 正确解决方案

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

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

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

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

❌ 错误示例（仍会 404）：

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

⚠️ 注意事项

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