<script setup lang="ts">
withDefaults(defineProps<{ src?: string; mode?: 'aspectFill' }>(), {})
const emits = defineEmits<{ displayed: [] }>()
const visible = ref(false)
const imgClass = ref('blur-lg transition duration-500 hover:blur-none')
const handleLoad = async () => {
  visible.value = true
  imgClass.value = 'transition duration-500'
  await nextTick(() => {
    emits('displayed')
  })
}
</script>
<template>
  <!-- <div> -->
  <wd-img
    class="w-full h-full"
    width="100%"
    height="100%"
    :mode="mode"
    :style="{ visibility: visible ? 'visible' : 'hidden' }"
    :src="src"
    :custom-class="`vertical-bottom ${imgClass}`"
    @load="handleLoad"
  ></wd-img>
  <!-- </div> -->
</template>
