<script setup lang="ts">
withDefaults(defineProps<{ src?: string }>(), {})
const emits = defineEmits<{ displayed: [] }>()
const visible = ref(false)
const handleLoad = async () => {
  visible.value = true
  nextTick(() => {
    emits('displayed')
  })
}
</script>
<template>
  <!-- <div> -->
  <wd-img
    class="w-full h-full"
    width="100%"
    height="100%"
    :style="{ visibility: visible ? 'visible' : 'hidden' }"
    :src="src"
    @load="handleLoad"
  ></wd-img>
  <!-- </div> -->
</template>
