Nuxt Image 本地图片路径为啥不生效？

FSD-玉茂提问于 2026-03-07 18:36:17 阅读 34

框架

我在 Nuxt 3 项目里用 @nuxt/image 显示本地图片，但一直加载不出来。图片放在 public/images 目录下，按文档写的是这样：

<NuxtImg src="/images/test.jpg" width="300" />

结果控制台报 404，路径明明是对的，直接在浏览器输 /images/test.jpg 也能看到图。是不是我哪里配置漏了？

我来解答赞 9 收藏

反馈

2 条解答

文浩酱~ Lv1

这个问题挺常见的，关键在于 Nuxt Image 的工作方式和默认配置。

先说原因：Nuxt Image 默认使用 ipx 作为图片 provider，它的路径解析逻辑和直接写不一样。ipx 会从你配置的 dir 目录开始找图片，而不是从 public 根目录。

解决方案有两个思路：

方法一：调整路径写法

如果你的目录结构是 public/images/test.jpg，在 nuxt.config.ts 里这样配置：

export default defineNuxtConfig({

  modules: ['@nuxt/image'],

  image: {

    // 告诉 ipx 从哪个目录找图片，相对于项目根目录

    dir: 'public/images'

  }

})

然后组件里这样写，注意不要带 /images 前缀：

因为 dir 已经指定了 public/images，所以 src 只需要写图片名就行。

方法二：换用 static provider

如果方法一不生效，或者你想更直观地控制，试试把 provider 改成 static：

export default defineNuxtConfig({

  modules: ['@nuxt/image'],

  image: {

    // 直接从 public 目录读取

    provider: 'static',

    static: {

      basePath: 'images'

    }

  }

})

这样组件里就可以写完整路径了：

再补充一点：如果你在开发环境（npm run dev）下用的是 ipx provider，它其实是在内存中处理图片的，有时候会有缓存问题。解决方法是重启 dev server，或者清理 .nuxt 目录后重跑。

你试试看哪种方式能跑通，有问题再贴具体报错。

2026-03-11 11:18

小子墨 Lv1

这问题我也遇到过，确实挺烦人的。关键点在于 Nuxt 3 和 @nuxt/image 的配置有点小坑。

首先检查下你的 nuxt.config.ts 文件，确保有正确配置 image 模块：

export default defineNuxtConfig({

  modules: ['@nuxt/image'],

  image: {

    dir: 'public/images'  // 这个很关键

  }

})

安全提示：确认你的 public 目录没有被意外暴露敏感文件，比如 .env 之类的。

如果还是不行，试试改用这种写法：

注意那个波浪号 ~ ，在 Nuxt 里代表项目根目录。有时候不写全路径就是会抽风。

另外记得转义特殊字符，比如图片名里有空格或中文的话，要用 encodeURIComponent 处理下。

我上次就是被这个坑了半小时，后来发现是图片名里有个空格没处理。现在看到 404 都 PTSD 了...

2026-03-07 19:00