Nuxt-image IPX 在使用 SSR 的生产环境中找不到图片（部署在 Google App Engine 上）

Question

我在最新版本v0.7.1上遇到了Nuxt-image插件的问题：在生产中，图像未通过 nuxt-image 和默认IPX 提供程序加载。

\n

我很难理解这是否是配置错误、打包/部署问题或来自 nuxt / nuxt-image / ipx 的错误。

\n

详细信息如下：

\n

在开发中，它运行良好：

\n

\n
• \xe2\x9c\x85<nuxt-img>标签替换为<img>带有 _ipx/ 路径和修饰符的标签
\n
• \xe2\x9c\x85 IPX 服务器/中间件正在工作并解析以 /_ipx 开头的路径
\n
• \xe2\x9c\x85 图像通过 IPX，位于/_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpgload well等路径
\n

\n

然而在生产中：

\n

\n
• \xe2\x9c\x85<nuxt-img>标签替换为<img>带有 _ipx/ 路径和修饰符的标签
\n
• \xe2\x9c\x85 IPX 服务器/中间件正在工作并尝试解析以 _ipx 开头的路径
\n
• /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpgIPX 找不到类似路径的 \xe2\x9d\x8c 图像，并显示错误： “错误：未找到\n在此找不到请求的 URL /_ipx/f_webp,q_80,s_1024x683/imagesphotos/photo1.jpg服务器。”
\n

\n

\n

我已经检查过原始图像确实是从我的静态文件夹部署的，并且可以在路径/images/photos/my-photo.jpg中找到

\n

\n

这是我的配置：

\n

包.json：

\n

  "dependencies": {\n    "@nuxt/image": "^0.7.1",\n    ...\n  }\n

\n

nuxt.config.js：

\n

module.exports = {\n  ssr: true,\n  ...\n  \n  modules: [\n    \'@nuxt/image\',\n    ...\n  ],\n\n  image: {\n    presets: {\n      avatar: {\n        modifiers: {\n          width: 300,\n          height: 300,\n          format: \'webp\',\n          quality: 80,\n        }\n      },\n      webp: {\n        modifiers: {\n          format: \'webp\',\n          quality: 80,\n        }\n      }\n    }\n  },\n  ...\n}\n

\n

我的 Nuxt 项目页面中的用法：

\n

  <nuxt-img preset="webp" src="/images/photos/succes-vente-de-site.jpg" \n    width="1980" height="1320" sizes="sm:100vw md:100vw lg:100vw" loading="lazy" \n    class="rounded-2xl w-auto max-h-80" />\n

\n

该 Web 应用程序使用 SSR，并通过 Github Actions 部署到 Google App Engine 上。
\n如果需要的话我还可以分享 Github Action 文件:)

\n

我在发布之前已经对这个主题进行了研究，只发现了类似的问题，但并不是我的实际情况：

\n

\n
• https://github.com/nuxt/image/issues/757
\n
• https://github.com/nuxt/image/issues/165
\n
• https://github.com/nuxt/image/issues/689
\n
• https://github.com/nuxt/image/issues/354
\n

\n

Answer 1

我面临着同样的问题。我认为您唯一要做的就是遵循正确的步骤：

步骤1：（更新nuxt配置文件）

• 在 nuxt.config.js 中添加图像

  image: { domains: [process.env.FRONTENDURL] }

• 在模块部分添加 @nuxt/image 而不是 buildModules

步骤 2：（tsconfig.json）

• 将 @nuxt/image 添加到类型部分

  “类型”：[@nuxt/image]

• 这应该放在类型内所有值的末尾

步骤3：

• 将所有图像放入静态目录中

步骤4：

• 将 nuxt-image 更新为<nuxt-img src="image path inside static directory" />ex。<nuxt-img src="helloWorld.jpg"/>