接下来如何检查图像是否已加载到vue中

Question

我正在尝试弄清楚如何检查图像是否正在加载，接下来我将使用 vite 和 vue (v3)。但是我有点找不到关于 vue next 主题的任何信息。我尝试使用

@加载 img，但显然它不再在 vue 3 中使用：我只是一无所知。

模板

<div
    v-if="image"
    :class="avatarClassNames"
    :style="`background-image:url(${image});`"
    @load="image"
  />

Answer 1

<div> 元素不会触发加载事件，因此 @load 将不起作用：这不是特定于 Vue3 的问题。

听起来您想改为预加载图像。假设在props中提供了image，你可以这样做：

setup(props) {
    const isLoaded = ref(false);

    watch(() => props.image, (image) => {
        isLoaded.value = false;

        const img = new Image();
        img.onload = () => isLoaded.value = true;
        img.src = image;
    }, { immediate: true });
}

接下来如何检查图像是否已加载到vue中

how to check if image is loaded in vue next

vue.js

vuejs3