当从 kubernetes 集群中的另一个微服务提供图像时,如何使用 next js 图像优化?

How to use next js image optimization when images are served from another microservice in a kubernetes cluster?

我的 nextjs 应用程序中有一个反应组件,它使用 next/image:

<Image
    src={`http://backend${image.url}`}
    alt={image.alt}
    width={image.width}
    height={image.height}
    />

在行 src={'http://backend${image.url}'} 中,backend 是 kubernetes 服务的名称,nextjs 微服务可通过该服务获取图像。

当我部署它时,nextjs 微服务在呈现 <Image /> 组件时崩溃(没有错误)。 (没有 <Image /> 的页面可以毫无问题地呈现。)

我不知道原因,但 pod 重新启动了 nexjs 容器。我检查了 kubectl top pod 是否是因为资源限制,但没有发现 CPU/RAM 限制。

图像位于配置的 kubernetes 卷中。有两个 nginx 服务图像的微服务:

  1. 其中之一将图像提供给世界,例如网络浏览器可以请求这样的图像:/media/images/image-1.jpg(效果很好。)

  2. 另一个将图像提供给 nextjs 微服务。它包括一个名为 backend 的 kubernetes 服务。例如,在 nextjs 容器中,可以这样请求图像:

    <Image src={'http://backend${image.url}' ... />

当我关闭图像优化 (unoptimized={true}) 并更改 src 以从网络浏览器(而不是 nextjs 微服务)获取图像时,一切正常:

<Image
    unoptimized={true}
    src={`${image.url}`}
    alt={image.alt}
    width={image.width}
    height={image.height}
    />

我想要图像优化功能。如何处理这个问题。提前致谢!

更新

有没有办法让 "http://backend/media/image-1.jpg""/media/image-1.jpg"nextjs 微服务中相等?这样 "/media/image-1.jpg" 就会解​​析为 "http://backend/media/image-1.jpg"?

这是 next js 中的错误。下个稳定版就ok了

有关详细信息,请参阅:https://github.com/vercel/next.js/issues/22644