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>

<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?

Nuxt•16mo ago•

4 replies

.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>

<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?

NuxtImage Fade In

Similar Threads

NuxtImage Fade In

Similar Threads

Similar Threads

Similar Threads