Next.js Discord

Discord Forum

Images wont load sometimes

Answered
yyanzin posted this in #help-forum
Open in Discord
yyanzinOP
For some reason the images from the nextJs Image container wont load sometimes, specially when I purposely make a page error (ex: when I type the wrong id in URL from my dynamic page, then it shows a page error). The images works fine when I don't use the nextJs image component. It doesn't show anything in the console, idk if I'm setting something wrong or I need to configure something else.
Answered by Rafael Almeida
the actual issue is because at least in the snippet you shared, the Image component is loading the resource relative to the current path. so if you are at app.com/foo it will load the resource from app.com/foo/email-icon.png which is probably not what you want. you need to prefix the path with / so the browser loads the resources from the root
View full answer

5 Replies

Satin Angora
Using Image component, import your resource first; import Logo from "resources/images/brand-logo.svg" then use reference by interpolating it to src property 
<Image
  ...
  src={Logo}
  ...
/>
I found out it works better. It may be related to the static asset path, I'm not sure.
Rafael Almeida
the actual issue is because at least in the snippet you shared, the Image component is loading the resource relative to the current path. so if you are at app.com/foo it will load the resource from app.com/foo/email-icon.png which is probably not what you want. you need to prefix the path with / so the browser loads the resources from the root
Answer
Rafael Almeida
but yeah if you are using the Image component it would be better to just import the image, this way you also don't need to manually specify the width and height of the image
yyanzinOP
I tried the "/" to reference the images and it worked, it was a dumb mistake from my part :fine: . Thanks for the tips guys.