Svg images returning 502 and not loading with next/image

Support
, ,
1

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

2

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!

3

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.

4

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.

6

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
7

This has solved the issue for us, although the SVGs load painfully slow compared to the other image formats. There is over a second delay. Has anybody else had issues with this?

8

@JC-Darwin,

What’s the website in question?

9

Using the priority tags for the next/images has helped a little bit as this prevents the extra delay from lazy loading, but ultimately this is still really slow compared to pre-optimising images and just loading them directly. The ‘middleman’ optimiser service is adding noticeable overhead regardless, as discussed on this post;

11

@JC-Darwin hey! this should be fixed in our most recent release (but our plugin isn’t defaulting to that version quite yet). can you manually install at 3.6.2 and let us know if that fixes your issue? thanks! npm install --save @netlify/plugin-nextjs@3.6.2

1 Like
12

Sorry to bother but a same problem happened to my site equipped with next/image with Essential Next.js 4.3.2 on Netlify Plugins.

Refer to this image link:

https://625ed645d61e412a4732ac64--aidoru.netlify.app/_ipx/w_3840,q_75/%2F_next%2Fstatic%2Fmedia%2Fcreative-coding.049d0983.png?url=%2F_next%2Fstatic%2Fmedia%2Fcreative-coding.049d0983.png&w=3840&q=75

It showed this message:

{“errorMessage”:“2022-04-19T15:40:40.754Z 12a3280d-18ce-49ee-8d50-bb1fe6d63a22 Task timed out after 10.02 seconds”}

Associated repo:

https://github.com/FreshP0325/shuding-blog

Thanks in advance!

13

Hey there, @KashimaNai :wave:

Thanks so much for reaching out-- this is no bother at all! I am glad you found us :slight_smile: Can you please share your latest deploy log from your site?