Images in my /public folder not rendering correctly

I deployed my node.js backend on and it has a “/public” folder with all the images that are supposed to be called on my nextjs frontend.
Turns out only the images called as a background-image are getting rendered while the direct image calls are not rendering.
If I go to the backend link for image directly it does show up but its not rendering the image on the frontend.
What am I doing wrong here? tia <3

You can open up the Chrome developer tools (Ctrl+Shift+i), go to Network tab, refresh your frontend, and you should see an http/fets/xhr request for those images. What is the status of those requests 200? 401?

Another thing you can do is to right click on the image and choose Inspect to see the HTML behind it, what path is behind the image?

This might give you some insight what is happening.

It is actually 400 for some reason. The same path works as a “background-image” in CSS but not as an image component.
For example :
If you go directly to the backend path for the US flag : (it works)
But the image on the website doesn’t work : Image

Can someone help with this?


Do you have an example of how an image is called from your NextJS code?

Jérémy, Render Support

Hey there,

I’m calling the image href in the image component same as the direct link in frontend.
For example :
In Next Image component :


is the image same as let’s say :

you see it works in the latter but not in the frontend.
But if I use it as a background in the frontend it works.
You can check the console on the website here

Thanks for looking into it

Maybe I’m doing something wrong, but it fails on load everything from the backend

It works fine for me just the image components are not loading although the background images work. Anyways thanks for trying, Ill probably take the app somewhere else. tysm!

Just note that I’m not a Render support, so they might actually be able help in a better way than I am.
I would at least check them out before going somewhere else. I’m not completely sold on this being a problem isolated to render hosting.

You’re trying to reach the environment variable NEXT_PUBLIC_API_URL via process.env but I don’t see it added to your environment variables in your Render service. It’s likely why images are failing to load.

Jérémy, Render Support

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.