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