如何解决Nuxt3执行generate命令后Nuxt-img出现404的问题？

可能的原因及对应解决方案 #

1. 图片路径解析错误 #

你的NuxtImg组件中src以/开头，会被解析为网站根路径，但静态生成后，nuxt-image处理后的图片会放在dist/_nuxt/img目录下，开发环境与静态生成环境的路径解析逻辑不一致。

解决：去掉src开头的斜杠，改为对应dir: "assets/images"配置下的相对路径：

<NuxtImg
  format="webp"
  class="mobile"
  src="website/home/above-fold-illustration-mobile.png"
  alt="illustration"
  aria-hidden="true"
/>

2. 未配置静态生成适配的图片提供商 #

默认情况下，nuxt-image可能未针对静态生成模式配置正确的提供商，导致生成时未处理并输出图片到dist目录。

解决：在nuxt配置中明确指定provider: "static"：

modules: ["@nuxt/image-edge"],  
image: {
  dir: "assets/images",
  provider: "static"
},

3. 缺少图片尺寸参数 #

部分场景下，NuxtImg如果未指定width和height，静态生成阶段可能无法正确触发图片处理流程。

解决：添加图片的实际宽高参数（可根据设计稿填写）：

<NuxtImg
  format="webp"
  class="mobile"
  src="website/home/above-fold-illustration-mobile.png"
  alt="illustration"
  aria-hidden="true"
  width="800"
  height="600"
/>

4. @nuxt/image-edge版本兼容性问题 #

@nuxt/image-edge是预发布版本，可能存在静态生成相关的bug。

解决：

• 升级到最新的@nuxt/image-edge版本；
• 尝试替换为稳定版@nuxt/image（需确认已适配Nuxt3）。

5. 预渲染路由未覆盖图片所在页面 #

如果图片所在页面未被预渲染，nuxt-image不会提前处理该页面的图片。

解决：在nuxt配置中明确指定预渲染路由：

nitro: {
  prerender: {
    routes: [
      '/', // 替换为你使用图片的页面路径
      // 其他需要预渲染的路由
    ]
  }
}

验证步骤 #

执行nuxt generate后，查看dist/_nuxt/img目录下是否生成了对应的webp格式图片。如果存在，说明图片已被正确处理，此时访问静态页面应该能正常加载图片。

内容的提问来源于stack exchange，提问作者Jean-Pierre Engelbrecht