image 503 (Service Unavailable)

I've been experiencing this issue for over a year now, both in development and production mode. Every time the page is reloaded, the images do not load randomly, then one thing or another. What can be wrong?

In production mode I see this error, the symptoms are the same as with the 503 error in development.

Jul 20 '24 00:07 mak33v

This happens to me constantly as well

Jul 23 '24 21:07 Lehoczky

I'm in the middle of redoing a Nuxt 3 project and I also get this error constantly. The error is not present in the old project. The old project uses package version is "^1.0.0-rc.1" and the new uses "^1.7.0".

Aug 05 '24 13:08 Healios

I have a similar problem nuxt version 3.10.0

Aug 09 '24 08:08 AKadochnikov

same.. would love to hear if someone figured out a bandaid fix at the very least

Aug 10 '24 09:08 Drstocktor

same.. would love to hear if someone figured out a bandaid fix at the very least

Also experiencing this when using ipx as image provider. You could either temporarily fix it by handling the error like so: <NuxtImg @error="handleImageError" />

const handleImageError = (event) => { event.target.src = "/images/fallback.png"; }; It seems to trigger the image to load correctly after the error happens.

or you can disable ipx as the image provider.

Aug 15 '24 12:08 ZnaaMiR

The same thing is happening to me, is it related to multiple images being optimized in runtime at the same time? If this problem is not a bug but a limitation it will make the module completely unusable on any commercial site.

Can anyone confirm that the image component of Next.js has the same problem? It seems to be a similar logic

Aug 17 '24 10:08 awdr74100

Any chance you guys are using SWR? As that breaks ipx when not excluding it from SWR with route rules ( /_ipx/**, { cache: false })

Oct 02 '24 15:10 bernhardberger

Any chance you guys are using SWR? As that breaks ipx when not excluding it from SWR with route rules ( /_ipx/**, { cache: false })

I'm not using SWR, unless it's enabled by default?

Oct 05 '24 17:10 Healios

Are you using the Nuxt Security module? I've been getting the 503 error (on random images/random reloads) only after I started using the security module. Maybe that's related?

Also I could note that this does apparently NOT happen anymore once I remove loading="lazy"...

Clicking into the network tab shows that there's a Nuxt error on the response:

Nov 09 '24 15:11 mhelbich

Any update on this? Reducing base image sizes before processing helps alleviate the issue somewhat, but random 503's are forcing me to rethink the use of nuxt/img entirely in my project.