Nuxt-image IPX 无法使用 SSR(部署在 Google App Engine 上)在生产环境中找到图片

问题描述 投票:0回答:1

我在最新版本 v0.7.1 上遇到了 Nuxt-image 插件的问题:在生产中,图像不是通过 nuxt-image 和默认的 IPX 提供商加载的。

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

详情如下:

在开发中,它运行良好:

  • <nuxt-img>
    标签替换为带有 _ipx/ 路径和修饰符的
    <img>
    标签
  • ✅ IPX 服务器/中间件正在工作并且resolving 以 /_ipx 开头的路径
  • ✅ 图像通过 IPX,在
    /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg
    加载好

但是在生产中:

  • <nuxt-img>
    标签替换为带有 _ipx/ 路径和修饰符的
    <img>
    标签
  • ✅ IPX 服务器/中间件正在工作并且attempting to resolve paths starting with _ipx
  • ❌ 通过 IPX 的图像在像
    /_ipx/f_webp,q_80,s_1024x683/images/photos/my-photo.jpg
    的路径下没有被 IPX 找到,错误:“错误:未找到 在此服务器上找不到请求的 URL /_ipx/f_webp,q_80,s_1024x683/imagesphotos/photo1.jpg。”

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

这是我的配置:

包.json:

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

nuxt.config.js :

module.exports = {
  ssr: true,
  ...
  
  modules: [
    '@nuxt/image',
    ...
  ],

  image: {
    presets: {
      avatar: {
        modifiers: {
          width: 300,
          height: 300,
          format: 'webp',
          quality: 80,
        }
      },
      webp: {
        modifiers: {
          format: 'webp',
          quality: 80,
        }
      }
    }
  },
  ...
}

在我的 Nuxt 项目页面中的用法:

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

Web 应用程序使用 SSR,并通过 Github Actions 部署到 Google App Engine。
如果需要,我也可以分享 Github Action 文件 :)

我在发布之前已经对该主题进行了研究,只发现了类似的问题但不是我的实际情况:

javascript google-app-engine vuejs2 nuxt.js
1个回答
0
投票

我遇到了同样的问题。我认为你唯一要做的就是遵循正确的步骤:

第一步:(更新nuxt配置文件)

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

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

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

第 2 步:(tsconfig.json)

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

    “类型”:[ @nuxt/图像 ]

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

第三步:

  • 将所有图片放入静态目录

第四步:

  • 将 nuxt-image 更新为
    <nuxt-img src="image path inside static directory" />
    前。
    <nuxt-img src="helloWorld.jpg"/>
© www.soinside.com 2019 - 2024. All rights reserved.