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`，并可以在此处执行相应的操作。

相关问题

vue3 监听img标签加载失败

在 Vue 3 中，监听 img 标签的加载失败事件，你可以使用 `v-on` 挂载一个自定义的 `error` 事件处理器。通常我们会结合 `ref` 来获取到元素实例以便于处理。下面是一个示例：

<template>
  <div>
    <img :src="imageUrl" ref="imageRef" @error="handleImageError">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url',
    };
  },
  methods: {
    handleImageError(e) {
      console.error('Image loading failed:', e);
      // 这里可以添加你需要的错误处理逻辑，比如显示默认图片、提示用户等
    },
  },
};
</script>

在这个例子中，当图片加载失败时，`handleImageError` 方法会被调用，并打印出错误信息。你可以根据实际需求在此处定制错误处理策略。

vue2 如何监听背景图片是否加载成功

在Vue2中监听背景图片是否加载成功的常用方法是使用`Intersection Observer API`或者结合`vue-lazyload`这样的懒加载库。这里我将介绍一种基本的使用`Intersection Observer`的方式：

首先，在HTML中设置一个`img`元素，并添加一个数据属性用于表示图片加载状态，比如`lazyLoadedImage`:

<img :src="lazyLoadedImage.src" v-if="!lazyLoadedImage.loaded" :alt="lazyLoadedImage.alt" ref="lazyImageRef">

然后，在你的Vue组件内，定义一个data对象并初始化这个属性：

export default {
  data() {
    return {
      lazyLoadedImage: {
        src: '默认占位图',
        alt: '默认图片描述',
        loaded: false,
      },
    };
  },
};

接着，创建一个自定义指令`load-image`，并在mounted钩子中使用Intersection Observer监听图片是否进入视窗：

export default {
  directives: {
    loadImage: {
      inserted(el) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              el.src = this.lazyLoadedImage.src;
              this.lazyLoadedImage.loaded = true;
              // 如果需要，可以取消观察
              observer.unobserve(el);
            }
          });
        });

        // 观察元素，当它进入视野时调用回调函数
        observer.observe(this.$refs.lazyImageRef);
      },
      unbind() {
        // 当指令被移除时，取消观察
        this.$refs.lazyImageRef && this.$refs.lazyImageRef.style.display = 'none'; // 防止多次触发
        this.$refs.lazyImageRef && observer.unobserve(this.$refs.lazyImageRef);
      },
    },
  },
};

这样，当背景图片完全加载进来并且进入用户的视窗时，就会自动替换占位图。