Next.js Discord

Discord Forum

How do i use api url's with next images

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
<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)}
                    />
Answered by Schneider’s Smooth-fronted Caiman
nvm figured something out
View full answer

14 Replies

Greek Shepherd
Yeah thats correct. Does the route handler not work? Does it return errors? Whats the issue
Schneider’s Smooth-fronted CaimanOP
it doesnt work unless i give it the complete url
Nile perch
You are using App Router? What does your route handler look like?
Schneider’s Smooth-fronted CaimanOP
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?
Nile perch
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.
Schneider’s Smooth-fronted CaimanOP
yea backend is diffrerent
Nile perch
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).
Schneider’s Smooth-fronted CaimanOP
but my backend path is not accessable outside
Schneider’s Smooth-fronted CaimanOP
nvm figured something out
Answer