vue3 监听img标签加载成功

在 Vue3 中，监听 `img` 标签的加载完成事件通常通过 `load` 事件结合响应式属性和 `v-model` 或者 `ref` 来实现。以下是一个简单的例子：

<template>
  <div>
    <img :src="imageUrl" ref="imageRef" @load="handleImageLoad">
    <p v-if="isLoading">图片正在加载...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = 'your-image-url';
let isLoading = false;

const imageRef = ref(null);

async function handleImageLoad() {
  isLoading = false;
  // 在这里可以添加异步操作或处理加载后的逻辑
  await someAsyncTask();
}
</script>

在这个例子中，我们使用了 `ref` 创建了一个引用，`@load` 事件绑定了 `handleImageLoad` 函数，在图片加载完成后，`isLoading` 变量会被设置为 `false`，并可以在此处执行相应的操作。