Next js container crashes and gets restarted when it renders <Image />

[HsnVahedi]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.16.0

What browser are you using?

firefox, ...

What operating system are you using?

Ubuntu

How are you deploying your application?

next start

Describe the Bug

when a page renders "next/image", nextjs container gets restarted without any errors. "kubectl logs" and "kubectl describe" shows nothing. The kubernetes pod's status goes from "RUNNING" to "COMPLETED" and nextjs container gets restarted.

Expected Behavior

I expect "next/image" to optimize the image and work properly, or at least show me errors about my problem. But it

To Reproduce

1. Provision a kubernetes persistent volume to your cluster.
2. Create a directory named "media" on it on copy some images into "media".
3. Deploy a microservice(k8s deployment + k8s service) which serves the images to other microservices (pods) in the cluster. And name the k8s service "backend". (So that in other kubernetes pods, images could be requested like "http://backend/media/image-1.jpg")
4. Deploy a nextjs microservice which uses "next/image": src="http://backend/media/image-1.jpg"
5. In your browser go to a page that renders "next/image".
6. Now the pod which runs the nextjs container goes from "RUNNING" to "COMPLETED" without any errors or logs. And the nextjs container gets restarted.

I want to use nextjs image optimization in my nextjs microservice which is deployed on a kubernetes cluster. But the nextjs container gets crashed and restarted whenever it has to render a "next/image" component. Here is the detailed steps to reproduce the scenario:

Steps to reproduce:

1. Provision a kubernetes persistent volume to your cluster.
2. Create a directory named media on it on copy some images into media.
3. Deploy a microservice(k8s deployment + k8s service) which serves the images to other microservices (pods) in the cluster. And name it backend. (So that in other pods, images could be requested by urls like "http://backend/media/image-1.jpg")
4. Add backend to image domains in next.config.js:

images: {
      domains: ["backend"],
}

5. Deploy a nextjs microservice which uses next/image:

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

6. In your browser go to a page that renders next/image.
7. Now the pod which runs the nextjs container goes from RUNNING to COMPLETED without any errors or logs. And the nextjs container gets restarted.

My question is:

How to use nextjs image optimization when images are served from another kubernetes microservice?

[timneutkens]

Can you try using next@canary?

[HsnVahedi]

@timneutkens Sure! But why would you suggest that? Is it going to log anything that could be useful? Sorry I'm not really sure what canary updates are.

[timneutkens]

Canary is our beta channel. It holds any changes made before a stable release is done. In this case we've replaced sharp with a better alternative which probably solves your issue.

[HsnVahedi]

@timneutkens God bless you! It solved my problem. Can I ask you to answer this stackoverflow question so that others could use it? Let me know if it's better to close the stackoverflow question.

[timneutkens]

Great, thanks for verifying 👍 We're planning to release a new stable version very soon.

[fe-rod]

@timneutkens we upgraded to 10.2.0 because of a memory leak issue with the Image tag, do you know if this is related to the error in this thread? Is 10.2.0 expected to solve this?

[timneutkens]

This issue can be closed as the initial post was solved and published on stable. @fe-rod make sure you upgrade to the latest version of Next.js as it has a bunch of memory improvements.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.