¿Cómo verificar que una imagen esté cargada o no en VueJS?

Al insertar una imagen en un proyecto de VueJS, es posible que no se cargue debido a las siguientes razones:

• Escribir URL de imagen incorrecta.
• Por mala conexión

Enfoque: Vamos a usar un evento en <img> para verificar si una imagen está cargada o no en VueJS, el evento que vamos a usar es:

• @load: el evento @load se activa cuando se carga la imagen y se ejecuta.

Configuración del proyecto:

Paso 1: Cree un Proyecto Vue usando el siguiente comando en la línea de comando:

vue create image-load

Nota: Hemos tomado ‘ image-load ‘ como el nombre del Proyecto, puede elegir cualquier nombre de acuerdo a su elección.

• Se creará la carpeta ‘image-load’.
• Abra la carpeta en su Editor de código.

La estructura del proyecto se verá así:

Paso 2: después de crear el proyecto, agregue una imagen en la ‘carpeta de activos’. Hemos añadido una imagen con el nombre – ‘ gfg.png ‘

Ejemplo: En este ejemplo vamos a seguir los siguientes pasos:

1. En este ejemplo, vamos a Insertar una imagen en la página de índice de nuestra aplicación.
2. En el proyecto » image-load «, creamos una variable de datos ‘ isLoaded ‘ que tiene el valor predeterminado » False «.
3. También se crea una variable de datos de ‘ descripción ‘ que contiene el encabezado de la página, es decir, «¿Cómo verificar si una imagen está cargada en VueJs?».
4. Asigne un evento ‘ @load ‘ a la imagen.
5. El nombre del evento será ‘ loadImage ‘, y su función será cambiar el valor de ‘ isLoaded ‘ a “ True ” si se carga la imagen.
6. Y por último, imprimiremos el valor de ‘ isLoaded ‘ en nuestra página de inicio, con la Imagen.

Ahora veamos cada paso uno por uno con la implementación.

<template>
    <div>
        <h1>{{description}}</h1>
        <br>
  
        <img src="./assets/gfg.png" alt="" @load="loadImage">
        <h2>Image Loaded : {{isLoaded}} </h2>
    </div>
</template>
  
<script>
    export default {
        name: 'App',
        data() {
            return {
                description: "How to check if Image "
                    + "is Loaded in Vue.js or not?",
                isLoaded: false,
            };
        },
  
        methods: {
            loadImage() {
                this.isLoaded = true;
            }
        }
    }
</script>
  
<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Ejecute la aplicación: en la línea de comando, ingrese el siguiente comando:

npm run serve

Salida: Abra el navegador y vaya a http://localhost:8080/   y verá la siguiente salida:

Explicación: como podemos ver, habíamos inicializado » isLoaded » en Falso inicialmente. La imagen se carga y a ‘ isLoaded ‘ se le asigna un valor True y luego se obtiene el valor ‘isImageLoaded’ y se muestra con la imagen durante la salida.