Images in my /public folder not rendering correctly

1

I deployed my node.js backend on render.com 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

2

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.

3

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 : https://hq-backend.onrender.com/countryFlags/80x80/us.png (it works)
But the image on the website doesn’t work : Image

Can someone help with this?

4

Hey,

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

Jérémy, Render Support

5

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 :

<Image
                src={`${process.env.NEXT_PUBLIC_API_URL}/images/frontier/${teamData.teamData.logo}.png`}
                width="300px"
                height="300px"
                placeholder="blur"
                loading="eager"
              ></Image>

is the image same as let’s say :

1000×1000 79.2 KB

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

6

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

hq-backend.onrender.com

image
image1080×960 43.3 KB

7

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!

8

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.

9

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

10

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