How do i use api url's with next images

[inland swallow]

<Image
                      src={`/api/${site.image}`}
                      alt=""
                      width={300}
                      loading="lazy"
                      height={300}
                      quality={80}
                      className="w-[150px] h-[150px] md:w-[300px] md:h-[300px] object-cover cursor-pointer transition-transform duration-300 hover:scale-105 rounded-2xl"
                      onClick={() => openModal(index)}
                    />

[worn totem]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[tardy cairn]

Yeah thats correct. Does the route handler not work? Does it return errors? Whats the issue

[inland swallow]

it doesnt work unless i give it the complete url

[polar field]

You are using App Router? What does your route handler look like?

[inland swallow]

okay so the bigger issue is that

the images are fetched from the backend

which is containerized

and my frontend can access it but no one else

and i assume that is causing it to not be visible via others?

[polar field]

Is the backend nextjs or separate? And containerization makes no difference here

If separate, then it is normal to have to specify full url. If calling nextjs backend then you can use a partial path like you were doing but you have to setup route handler to do so.

[inland swallow]

yea backend is diffrerent

[polar field]

So yeah you must specify full path, when you provide a partial path like you were doing you are appending that to the current url. So of course it won't work if using separate backend since these are running on different ports (or in prod, completely different domains).

[inland swallow]

but my backend path is not accessable outside

nvm figured something out