@load - Not Firing - Nuxt 3

[SleepiestAdam]

Really simple code:

<nuxt-img format="webp" src="/img/sleepiest-background.png" width="1593" height="717" :class="[backgroundLoaded == true ? 'opacity-100' : 'opacity-0', 'transition-opacity duration-200 ease-in-out']" @load="backgroundLoadComplete" />

<script>
export default {
  data() {
    return {
      backgroundLoaded: false,
    };
  },
  methods: {
    backgroundLoadComplete() {
      console.log('Background did load!');
      this.backgroundLoaded = true;
    },
  },
};
</script>

Unfortunately the @load event isn't firing, and I'm not sure why.

Using Nuxt 3 (3.0.0) and @nuxt/image-edge (^1.0.0-27827328.bc9ddc0).

[glashtin]

For me it does not call load if the page is called directly or if you hit f5 while on the page. If the page is called from another page then it works as expected.

---

• Operating System: Windows_NT
• Node Version: v18.12.1
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: npm@9.2.0
• Builder: vite
• User Config: runtimeConfig, app, css, vite, modules, colorMode, experimental, components, unocss, ssr, typescript, build
• Runtime Modules: @pinia/nuxt@0.4.6, @unocss/nuxt@0.48.0, nuxt-icon@0.1.8, @nuxt/image-edge@1.0.0-27840416.dc1ed65, @vueuse/nuxt@9.9.0, @nuxtjs/color-mode@3.2.0
• Build Modules: -

---

[Der-Alex]

Same here. It seems like the images are cached. Hitting F5 doesn't call the event handler. Hitting ctrl-F5 (delete cache) calls the handler on 'some' images....
Update: I face the same behaviour when using <img src="..." @load="doSomething" />. So does it have something to do with nuxt3 itself?

[piscis]

@pi0 could you have a look at #702 I fix the load listener it should now also work with picture as requested in #416 (comment)

[gregorvoinov]

same here, fires only when images are lazy loaded and not inside the viewport on init.

True does not work even with <img /> https://codesandbox.io/s/hardcore-glitter-lqb5uu?file=/app.vue

[SleepiestAdam]

Any update on a fix being pushed to release? Currently blocking us going into production.

[stefbowerman]

+1 On this... same code running on Nuxt2 works fine 🥴

[stanislavpodolia]

Wrapping with <ClientOnly> helped me with this one as a temporary fix.

[TheNaschkatze]

Please fix and tag as bug :)

[szadave]

+1 for this... any progress about this issue? 🤔

[everyx]

A workaround work for me is use $el to get the raw element, and emit load when image is already fully loaded.

<script setup lang="ts">
const img = ref();

const emit = defineEmits(['load', 'error', 'animationend']);
onMounted(() => {
  const element = img.value.$el as HTMLImageElement;

  if (element) {
    element.onerror = (event) => emit('error', event);
    element.onanimationend = (event) => emit('animationend', event);
  }

  nextTick(() => {
    if (!element || !element.complete) return;

    emit('load');

    if (element.naturalWidth === 0) {
      emit('error');
    }
  });
});
</script>

<template>
  <NuxtImg ref="img" v-bind="$attrs" @animationend="emit('animationend')" @error="emit('error')" @load="emit('load')" />
</template>

[sikhote]

This seems like a Vue issue, is that everyone else's impression as well?

[danielroe]

Note that @load does fire (#841) but on initial load the load event 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.

This is effectively the same issue as #412.

[drewbaker]

Ran into this again today, this is the solve for non-nuxt-image users:

Template:

    <img
        ref="image"
        @load="setImageLoaded"
    >

Script:

// Local state
const image = ref(null)
const hasLoaded = ref(false)

// Methods
const setImageLoaded = () => {
    hasLoaded.value = true
}
onMounted(() => {
    if (image.value?.complete) {
        setImageLoaded()
    }
})