This is a copy+paste version of another project that has previously built successfully. I’ve tried upgrading @netlify/plugin-nextjs dependency to latest and bringing it to the exact same version that’s running on another web, but to no avail.
The images were working fine on my previous deployment but I deployed some changes today and the images are not showing now. What happened? It returns following error
Thanks so much for reaching out. If you haven’t already, could you share the URL to your site, the full error message you are seeing, and your project repo / a reproduction? I am sharing this with the relevant teams, and they would like to reproduce this on their end.
Hello everyone! Thanks for the reports. We tracked this down to a problem in the latest version of ipx, which we reported to them and they quickly fixed. If you run npm update ipx it should upgrade it to 0.9.4, which should fix it. Thanks for your patience.
My project images worked perfectly before and I never included the ipx npm module. I did not and still have not included npm install ipx nor npm install --dev @netlify/ipx netlify-plugin-ipx. I tried to redeploy my website after the supposed “fix,” but was still presented with a 502 error with the same exact error message as @billyX007.
I then found the fix. For my project it was due to my “Build image selection” (under Site settings → Build & deploy → Build image selection) being set to Ubunto Xenial 16.04. I then switched it to the most recent build image Ubunto Focal 20.04 and now the images are displayed correctly with no server errors.
Hope this helps anyone that doesn’t have the npm ipx module installed like I did!
The without edge function is expected behaviour. You’ll always get a JPG without Edge Functions because we don’t support content-negotiation without Edge Functions.
About the issue with Edge Functions, the problem appears to be with the size of the image. The source image is a huge 5k pixel wide image and AVIF is a resource-hungry format. So, resizing into AVIF takes longer than 10 seconds (which is the timeout for Netlify Functions).
Thanks for clarifying! I had missed that the function was timing out because I don’t get any logs in the Edge Functions tab of my dashboard, but after checking the Functions tab, I can see that the _ipx function (for the copy of the site with edge functions enabled) is timing out.
I’ve also squooshed the image down to 433k, which seems more reasonable - but it still seems to be timing out. I’ve disabled avif in next.config.js, so now it should only be trying to encode webp. Are there any benchmarks for transcoding in edge functions? It’d be great to have a more solid understanding of what I should expect from them so that I can make sure content is ready for them.
production : https://takip.normod.com/
demo: https://deploy-preview-65--takipnormod.netlify.app/
Even of I didn’t touch anything related to footer social icons, now they are blank in demo site. How to solve that issue?Because of that issue I don’t deploy necessary change to production site and it’s effecting the business. Needing help!
Solved!
The issue is somehow related to ipx and next/image. While bundling the ""es ipx is used and sometimes out of control it’s not working as expected.
Solution: Instead of using next/image Image component ,use native html img.
So I was also experiencing this, only on one branch deploy.
Production (main branch) was working fine.
Branch deploys (PR driven) were working fine.
But dev branch was getting 502 on all next mages.
Solution - removed the dev branch deploy. Created new branch development and created branch deploys for that branch. Exactly same code base. All seems to be working now
! I am so glad to hear you have everything working now.