NuxtN
Nuxt•14mo ago
.fondazione

NuxtImage Fade In

Hello!

Can someone explain to me how I can add a basic fade effect after the image has been loaded?

I tried this

<script setup lang="ts">
// …
const isLoaded = ref(false)

function onLoad() {
  isLoaded.value = true
}
</script>

<template>
  <NuxtImg
    :src="props.src"
    loading="lazy"
    :width="props.width"
    :height="props.height"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="props.alt"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />
</template>


However, this works on first sight. But when I am switching pages back and forth. Images won't load again. It looks like as if cached images are not firing the load event anymore?
Was this page helpful?