从kubernetes集群中的另一个微服务提供图像时，如何使用下一个js图像优化? [英] How to use next js image optimization when images are served from another microservice in a kubernetes cluster?

问题描述

我的 nextjs 应用程序中有一个react组件，该组件使用 next/image :

 <图片src = {`http://backend $ {image.url}`}alt = {image.alt}宽度= {image.width}身高= {image.height}/> 

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

当我部署它时，呈现< Image/> 组件时， nextjs 微服务崩溃(没有错误).(没有< Image/> 的页面将呈现出来，没有任何问题.)

我不知道原因，但是 pod 重新启动 nexjs 容器.我检查了 kubectl top pod 来查看是否是由于资源限制，但没有发现CPU/RAM限制.

图像位于预配置的kubernetes卷中.有两个 nginx 微服务为图像提供服务:

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

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

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

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

 <图片未优化= {true}src = {`$ {image.url}`}alt = {image.alt}宽度= {image.width}身高= {image.height}/> 

我想要图像优化功能.如何处理这个问题.预先感谢！

更新

有没有办法制作"http://backend/media/image-1.jpg" 和"/media/image-1.jpg" 在 nextjs 微服务中是否相等?这样"/media/image-1.jpg" 会解析为"http://backend/media/image-1.jpg" ?

解决方案

这是下一个js中的错误.在下一个稳定版本中可以.

有关更多信息，请参见: https://github.com/vercel/next.js/issues/22644

I have a react component in my nextjs application which uses next/image:

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

In line src={'http://backend${image.url}'}, backend is the name of a kubernetes serivce through which images are available to nextjs microservice.

When I deploy it, nextjs microservice crashes (with no errors) when rendering the <Image /> components. (Pages with no <Image /> get rendered without any problem.)

I don't know the reason but the pod restarts the nexjs container. I checked kubectl top pod to see whether it's because of resource limitations but found no CPU/RAM limitations.

The images are located in a provisioned kubernetes volume. There are two nginx microservices which serve the images:

1. One of them serves the images to world, for example web browsers can request images like this: /media/images/image-1.jpg (which works fine.)

2. The other one serves the images to the nextjs microservice. It includes a kubernetes service named backend. For example in nextjs container an image can be requested like this:

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

When I turn off image optimization (unoptimized={true}) and change the src to get the image from the web browser (instead of nextjs microservice), everything works fine:

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

I want the image optimization feature. How to handle this problem. Thanks in advance!

UPDATE

Is there a way to make "http://backend/media/image-1.jpg" and "/media/image-1.jpg" equal in nextjs microservice? So that "/media/image-1.jpg" would get resolved to "http://backend/media/image-1.jpg"?

解决方案

This was a bug in next js. It will be ok in the next stable version.

For more information see: https://github.com/vercel/next.js/issues/22644

这篇关于从kubernetes集群中的另一个微服务提供图像时，如何使用下一个js图像优化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！