Next.js Discord

Discord Forum

SVG Images not loading

Answered
Ichneumonid wasp posted this in #help-forum
Open in Discord
Ichneumonid waspOP
I have downloaded a few svg images from logoipsum.com (and many other places just to make sure). They are all in public/images/logos folder. Im trying to get them to display using 
<Image
   priority
   className='dark:filter dark:invert'                 src='../public/images/logos/1706796671Fish23b.svg'
   width={176}
   height={40}
   quality={100}
   alt='ChatMe Logo'
/>

However I get the broken image icon no matter what. I have tried using multiple svgs. Any ideas ?
Answered by Ray
if they are in public folder, the url should be /images/logos/1706796671Fish23b.svg
View full answer

8 Replies

Ichneumonid waspOP
Apparently importing it worked for some reason ?
import SVGLOGO from "@logos/logoipsum.svg"
 ...
src={SVGLOGO}

Why would this work but not the full path as src ?
Answer
Ichneumonid waspOP
Oh, didnt realise that. Seems to be the case, thanks!
English Angora
@Ichneumonid wasp I'm having an issue with getting the image to load correctly. Can you tell me if you have your public folder at the root directory, or is it inside a different directory like src?
Ichneumonid waspOP
I dont think that plays that big a role. I have my images in public/images which is at the root. Are you sure youre not doing the same mistake I did above ?
@Ray the `public` folder should be at the root
English Angora
Got it, that's what I had! In case anyone has the same issue later, I actually had to reach further back to the image, like "../../../../../public/images/example.jpg". The docs seem to indicate something like "/images/logos/1706796671Fish23b.svg" should have worked, but it didn't for me unfortunately
@Ray the `public` folder should be at the root
English Angora
and thank you!