关于图片加载width设置100%让其自适应但获取的的高度为0

在使用img图片加载当中，设置宽度为100%时，但dom获取高度为0 例如

<script setup lang="ts">
  import { useTemplateRef, onMounted } from "vue";

  const ImgRef = useTemplateRef<HTMLImageElement>("Img");

  onMounted(() => {
    console.log(ImgRef.value?.offsetHeight) //获取的高度为0 

    
  });
</script>
<template>
  <div class="box">
    <img src="@/assets/bg_sign_banner.jpg" class="bg-img" ref="Img" />

  </div>
</template>
<style scoped lang="scss">
  .box {
    .bg-img {
      display: block;
      position: absolute;
      width: 100%;
      top: 0;
      z-index: -1;
      height: auto;
    }
  }
</style>

原因可能为img的dom加载了立即执行了，但此时图片为加载完成，图片未撑开盒子高度导致获取的高度为0

解决方案

1. 使用setTimeout

setTimeout(() => {
    const imgElement = ImgRef.value;
      console.log(imgElement?.offsetHeight); //可获取高度 293
    }, 1000);

2. 等图片完全加载完毕

  onMounted(() => {
    const imgElement = ImgRef.value;

    if (imgElement) {
   
      // 监听图片加载完成事件
      const handleLoad = () => {
        console.log("图片实际高度:", imgElement.offsetHeight);
        // 移除监听器避免重复触发
        imgElement.removeEventListener("load", handleLoad);
      };
       imgElement.addEventListener("load", handleLoad);

    }

  });