Svg images returning 502 and not loading with next/image

I recently attempted to deploy a WIP site for a client using Next.js and netlify, I’m using next/image for almost all images on the site and for .png’s it works fine. However, for some reason .svg’s seem to not be loading at all. Looking in the network logs they seem to receive a 502 on request

image

I have the Essential Next.js plugin on the site and am not doing anything revolutionary in my build process or image loading. As I said other image formats seem to load fine (ans .svg’s work when not loaded through next/image) - it’s just .svg’s and I can’t seem to find any other forum posts with the same issue, any help is appreciated - thanks

Hey there, @shubwub :wave:

It looks like this thread has been quiet for the past few days. Are you still encountering this issue? If you are, let us know what you have tried in the interim. Additionally, please link your repo and your Netlify site name.

Thank you!

Did you ever find a solution to this problem? We can’t get SVG images to work either with Netlify Next/JS and Next/Image.

Hi,

I’ve been working on a nextjs site which I’m also trying to host on Netlify. I’ve also noticed that SVGs inside of next/image result in 502s.

Any ideas for a solution would be appreciated.

hello all! can you try installing this tagged release?

npm install --save @netlify/plugin-nextjs@experimental-odb

this has significant next/image changes and should support svgs. let me know if this works for you! this work will also be merged into main very soon.

1 Like