Next.js Discord

Discord Forum

Can't access /public

Answered
Sokoke posted this in #help-forum
Open in Discord
SokokeOP
Hey guys,

As you can see I can't figure how to deal with getting static images from the /public with Internalization (next.js 14 app router).

I tried :

"@/public/blog/default-blog-cover.png";
"/public/blog/default-blog-cover.png";
"/blog/default-blog-cover.png";

Any idea how can I fix that ?

Thanks
Answered by D Trombett
use a relative path instead
View full answer

7 Replies

D Trombett
If @/ is configured as src/ then you can't use it to import public as it's outside the src folder
D Trombett
use a relative path instead
Answer
joulev
You can just put the image file in the same folder as the JavaScript file importing it too. It being in the public folder is not required.
@D Trombett If `@/` is configured as `src/` then you can't use it to import `public` as it's outside the `src` folder
SokokeOP
Yes I'm using src/ thanks ! I made it work by replacing the url with this (see screenshot) but isn't it ugly and not the best way when in prod?
@joulev You can just put the image file in the same folder as the JavaScript file importing it too. It being in the public folder is not required.
SokokeOP
Sure but the import will be in a component (in /components) isn't bad practice to put images inside a component folder?
@Sokoke Sure but the import will be in a component (in /components) isn't bad practice to put images inside a component folder?
joulev
It comes down to personal preference but I’d rather collocate related resources in the same place. If it is only needed in one place, it should also be in that place. No point following “components should only contain components” if you have to end up with ../../../public, that doesn’t make any sense.