Nuxt/image-edge图片链接失效与优化异常问题咨询

问题根源分析 #

• Nuxt 3 已将 buildModules 合并到 modules 配置项中，你同时在两个数组里注册 @nuxt/image-edge，会导致模块逻辑冲突。
• 未配置 image 模块的静态资源解析规则，IPX 无法正确识别 static 目录下的图片路径。

具体修复步骤 #

1. 修正模块注册配置 #

移除 buildModules 中的 @nuxt/image-edge，仅保留 modules 中的注册：

export default defineNuxtConfig({
    modules: [
        '@nuxt/image-edge',
    ],
    image: {
        // 配置静态图片源规则
        static: {
            prefix: '/images/' // 匹配你引用时的路径前缀
        },
        staticFilename: '[name]-[hash][ext]', // 指定生产环境哈希文件名格式
        domains: ['localhost'], // 开发环境必填，生产环境替换为你的域名
        presets: {
            default: {
                modifiers: {
                    quality: 80 // 可选，设置默认图片质量
                }
            }
        }
    }
})

2. 保持图片引用方式不变 #

继续使用原引用路径即可：

<nuxt-img src="/images/image.jpeg" />

3. 开发环境验证 #

运行 pnpm run dev 后，IPX 会通过代理处理图片（路径包含 _ipx 是正常行为，用于实时优化），此时图片应能正常加载。开发环境不会生成哈希文件名，这是为了支持热更新的设计。

4. 生产构建验证 #

运行 pnpm generate 后，优化后的带哈希文件名的图片会生成在 dist/_nuxt/ 目录，HTML 中的链接会自动替换为正确的静态路径，不再包含 _ipx/_ 前缀。

额外排查点 #

如果问题仍存在，可尝试：

• 删除 .nuxt 和 node_modules/.cache 目录，清除缓存后重新构建
• 确认 static/images/image.jpeg 文件确实存在，路径无拼写错误

内容的提问来源于stack exchange，提问作者Rotartsi