NuxtImage 默认从 public/ 目录查找图片，若图片实际位于 assets/img/ 下，需在 nuxt.config.ts 中显式配置 image.dir，否则会因路径解析失败导致 IPX 返回 404。
nuxtimage 默认从 `public/` 目录查找图片，若图片实际位于 `assets/img/` 下，需在 `nuxt.config.ts` 中显式配置 `image.dir`，否则会因路径解析失败导致 ipx 返回 404。
在 Nuxt 3 项目中使用 <nuxtimg></nuxtimg> 组件时，遇到 404 (IPX_FILE_NOT_FOUND) 是常见问题。其根本原因在于：Nuxt Image（基于 IPX）默认仅扫描 public/ 目录下的静态资源，而不会自动识别 assets/ 目录中的文件——即使你在 <img alt="NuxtImage 404 错误的根源与解决方案" > 标签中直接引用 _nuxt/assets/img/my-image.jpg 能正常工作（因为构建时已由 Vite 处理并内联或复制），但 <nuxtimg></nuxtimg> 的服务端/构建时图像处理流程依赖明确的源目录配置。
✅ 正确解决方式是在 nuxt.config.ts 中声明图像源目录：
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
dir: 'assets/img' // ✅ 告知 IPX：从此路径开始解析相对 src
}
})配置生效后，即可使用根相对路径（以 / 开头）引用图片：
<!-- 正确：src 对应 assets/img/my-image.jpg --> <NuxtImg src="/my-image.jpg" alt="示例图片" /> <!-- 支持格式参数（自动触发 IPX 处理） --> <NuxtImg src="/my-image.jpg" width="400" height="300" format="webp" />
⚠️ 注意事项：
-
dir配置值为相对于项目根目录的路径（非src/或public/内部）； -
src属性必须为相对路径且以/开头，如/my-image.jpg，而非_nuxt/assets/img/my-image.jpg或./my-image.jpg； -
assets/中的图片需为静态资源（如.jpg,.png），不支持动态导入或组件内import的模块化路径； - 若同时使用
public/和assets/img/，建议统一存放位置，避免混淆；必要时可通过image.sources扩展多源支持。
配置完成后重启开发服务器（npm run dev），IPX 将正确定位并处理 assets/img/ 下的图片，404 错误即刻消失。
