When multiple large images are loaded at the same time, NuxtImg stuck at placeholder, (`img.decode` fails silently)

[NamesMT]

Currently we're using img.decode when available

image/src/runtime/components/NuxtImg.vue

Line 152 in 67b40ac

img.decode()

, but it seems like if we have many NuxtImg created at the same time, loading somewhat large images (my test setup is 10x ~1MB images), some image.decode() will fail with EncodingError: The source image cannot be decoded., it is also silent and does not logged to console by default if we don't add @error handler, leaving the images stuck in placeholder state if we do use placeholder.

[DamianGlowala]

sharing for context: https://issues.chromium.org/issues/40261318

[SteinRobert]

We're seeing problems since version 2 as well - placeholder are not swapped when opening the page in a new tab.
We've been trying to track this down and eventually it looks like the nuxt image code to swap the image is not running, everything else works as it did before.

Opening links e.g. from a newsletter in 4-5 new tabs results in 1 or 2 out of the links having image placeholder not replaced. However, we do see that the actual larger image has been loaded in the network tab.

[ahoiroman]

Same here :-/

[chairulakmal]

I opened #2314 : a decode() rejection no longer keeps the placeholder up when the image loaded fine, and error still fires when it did not. This covers a rejected decode(), if the promise never settles in a background tab, the placeholder still sticks.