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

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

框架

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

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

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

我来解答赞 1 收藏

反馈

1 条解答

小子墨 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