"error" event not firing on nuxt-img

[bencehusi]

Steps to reproduce:

1) Create a nuxt-img tag with an @error event listener 2) Pass a function to the listener 3) The function is not fired if the image fails to load

<nuxt-img src="https://foo.bar/bas.jpg" @error="handleError">

What is expected?

Such as on a normal img element you can use the @error event, I expect the same for a nuxt-img element so I can show a placeholder in case of something went haywire during image loading.

I couldn't find any information about it in the docs. What am I missing? Thanks for your help!

[nathanchase]

+1. I tried to do an @error="showFallback" on nuxt-img in order to show a default image, but it didn't seem to ever receive the error that an image was a 404.

Ideally, it would work similar to ImageKit's implementation, where you could provide nuxt-img a modifier of the default image URL.

So it might appear like:

<nuxt-img
  src="/remote/image.png"
  width="300"
  height="169"
  :modifiers="{ default: '/images/fallbackImage.png' }"
/>

The replace method I had was the following. It's rudimentary and has to wipe the srcset, but it works on just an <img> tag:

replaceImage(image) {
      console.log('Image failed to load, setting fallback.');
      image.onerror = null;
      image.target.srcset = '';
      image.target.removeAttribute('srcset');
      image.target.src = this.fallbackImage;
    },

[shadow81627]

There is a pull request to bind all native event listeners to the img element. #416

[YohannPeltier]

You can use @error.native

[Artem-Schander]

You can use @error.native

seems not to work (anymore?)

Despite the fact that the docs say "Native events emitted by the element contained by and components are re-emitted and can be listened to."

See code: https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-img.ts#L98-L110

[theguriev]

Yeah, unfortunately it's not working anymore :(

[Artem-Schander]

@pi0 any interest in a PR?

[theguriev]

I played around a little bit with nuxt/image and looks like it's not nuxt/image problem, it's nuxt hydration problem. Moreover, I've found something similar in Next/React https://github.com/facebook/react/issues/15446 Still investigating how to fix that properly.

[theguriev]

So even if you try the pure img tag it won't work

[LynxTR]

any updates on this :/

[danielroe]

Note that @error does fire (https://github.com/nuxt/image/pull/841) but on initial load the error has already fired before Nuxt/Vue hydrates the page so it's not picked up by the code. It's likely we can resolve this, but it's not a bug in nuxt/image but rather a limitation of images in SSR-rendered Vue.

[nutpun]

For me to show image placeholder when image fails to load

 <NuxtImg
         :src="image_profile"
         onerror="this.onerror=null;this.src='/images/avatar.jpg'"
 />

[imnaK]

You could use

<NuxtImg :src="original.png" :placeholder="placeholder.png" />

as the placeholder acts like a fallback too if the image fails to load. (Got it from the Nuxt Discord)

[diadras]

You could use

<NuxtImg :src="original.png" :placeholder="placeholder.png" />

as the placeholder acts like a fallback too if the image fails to load. (Got it from the Nuxt Discord)

I am using IPX with NuxtImage and I had to use placeholder="/no_image.svg".

If I use the variation :placeholder="/no_image.svg" my component wouldn't load (probably because it was trying to access "svg" from my non-existent "no_image" object)

I specifically need to start with / when using IPX otherwise it couldn't find the image