IPX Error 500 on Nextjs Images with Cloudinary

Support
1

I’m having some issues with images returning an IPX error 500 on a NextJS app. I’m using Sanity as a CMS plugged with Cloudinary to host our images and videos. Everything is working well locally or on Vercel so it seems there’s some issue with ipx.

  • NextJs 12.1.0
  • @netlify/plugin-nextjs 4.7.0
  • Site - field22-frontend
  • I’m building my website by pushing directly on our main branch on Github

Here is my netlify.toml file

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

:-1: Here is an example of an image that doesn’t work:

https://field22-frontend.netlify.app/_ipx/w_3840,q_75/http%3A%2F%2Fres.cloudinary.com%2Ffield-systems%2Fimage%2Fupload%2Fv1652005693%2FTest%2FUltraviolet%2FFIELD_Prolonged_Exposure-3_z7rric.avif?url=http%3A%2F%2Fres.cloudinary.com%2Ffield-systems%2Fimage%2Fupload%2Fv1652005693%2FTest%2FUltraviolet%2FFIELD_Prolonged_Exposure-3_z7rric.avif&w=3840&q=75

:+1: Here is an example of another image hosted exactly in the same way on Cloudinary that does work:

https://field22-frontend.netlify.app/_ipx/w_1920,q_75/http%3A%2F%2Fres.cloudinary.com%2Ffield-systems%2Fimage%2Fupload%2Fv1652376054%2FProjects%2FUltraviolet%2F20.11.17.ultraviolet.08_uzawa6.jpg?url=http%3A%2F%2Fres.cloudinary.com%2Ffield-systems%2Fimage%2Fupload%2Fv1652376054%2FProjects%2FUltraviolet%2F20.11.17.ultraviolet.08_uzawa6.jpg&w=1920&q=75

Any idea why some images are broken?

Thanks

2

Hey @cdedreuille,

Is Cloudinary returning all images with image/* content-type header? If not, it needs to do that. I’m assuming it’s doing that for .jpg and not for .avif.

3

I’m not sure this is something I could customise. I don’t understand why we need to do these modifications on our side. We tested the website on Vercel with the same code and it worked without any modifications.

Is there anything we can do on Netlify side to fix this?

5

Unfortunately not. Images are checked for the correct content-type. If I recall correctly, this was changed on purpose to fix issues with people sending invalid images or some incorrect files to the IPX function, so I won’t think that this would be reverted any time soon.

In any case, I’ve passed it on to the team for further discussion and are now waiting on their feedback. But the immediate answer at the moment is, this is not supported.

6

I found crazy that a Nextjs website with images or videos hosted on Cloudinary doesn’t work on Netlify. These are 2 very popular solutions. There must be a way.

7

To modify your statement, images from Cloudinary that have the correct content-type header, do work. So it’s not like Netlify doesn’t support Cloudinary-hosted images. Sending an incorrect content-type header is the real problem here that needs to be fixed.