从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
微服务为图像提供服务:
-
其中一个将图像提供给世界,例如,Web浏览器可以请求这样的图像:
/media/images/image-1.jpg
(效果很好).> -
另一个将图像提供给
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:
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.)The other one serves the images to the
nextjs
microservice. It includes a kubernetes service namedbackend
. For example innextjs
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屋!