how to check if image is loaded in vue next-CodePudding

I'm trying to figure out how to check if an image is being load, I'm using vite and vue next (v3). But I kind of don't find any information about the topic for vue next. I tried using the

@load on the img, but apparently it isn't used anymore in vue 3: I'm rn just clueless.

template

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

CodePudding user response：

A <div> element does not fire the load event, so @load will not work: it's not a Vue3-specific issue.

It sounds like you want to preload the image instead. Assuming that image is provided in props, you can do this:

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 });
}