当图像从 Kubernetes 集群中的另一个微服务提供时，如何使用下一个 js 图像优化？

Posted 2023-03-06

【中文标题】当图像从 Kubernetes 集群中的另一个微服务提供时，如何使用下一个 js 图像优化？

【英文标题】：How to use next js image optimization when images are served from another microservice in a kubernetes cluster?

【发布时间】：2021-05-31 03:26:47

【问题描述】：

我的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 微服务为图像提供服务：

其中一个向世界提供图像，例如网络浏览器可以请求这样的图像：/media/images/image-1.jpg（工作正常。）

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

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

当我关闭图像优化 (unoptimized=true) 并更改 src 以从 Web 浏览器（而不是 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"？

【参考方案1】：

这是下一个 js 中的一个错误。下个稳定版就可以了。

欲了解更多信息，请参阅：https://github.com/vercel/next.js/issues/22644