Verificar si una imagen src está vacía usando JavaScript

En el mundo de la programación, a menudo necesitamos verificar si una imagen se ha cargado correctamente o si una imagen está vacía. Esto puede suceder cuando la imagen no está disponible en el servidor o cuando se carga una imagen con una ruta incorrecta. En este artículo, aprenderemos cómo verificar si una imagen src está vacía utilizando JavaScript.

📋 Aquí podrás encontrar✍

¿Cómo verificar si una imagen src está vacía?
Ejemplo de código completo: Verificar si una imagen src está vacía
Conclusión
Preguntas frecuentes

¿Cómo verificar si una imagen src está vacía?

Para verificar si una imagen src está vacía, podemos seguir los siguientes pasos:

Paso 1: Obtener la imagen por su ID

Podemos obtener la imagen por su ID utilizando `document.getElementById()`. Asignaremos este elemento a una variable.

Ejemplo de código:

var img = document.getElementById("mi-imagen");

Paso 2: Verificar si la propiedad src de la imagen está vacía

Podemos verificar si la propiedad `src` de la imagen está vacía utilizando `"if (img.src === "")"`. Dentro del condicional, podemos realizar la acción que deseamos.

Ejemplo de código:

if (img.src === "") { alert("La imagen está vacía."); }

Paso 3: Realizar la tarea deseada si la imagen src está vacía

Si la imagen src está vacía, podemos realizar la tarea deseada. Por ejemplo, podemos cargar una imagen predeterminada. El siguiente código cambiará la imagen src a una imagen predeterminada si la imagen original no se carga correctamente.

Ejemplo de código:

img.onerror = function() { this.src = 'imagen-predeterminada.png'; }

Ejemplo de código completo: Verificar si una imagen src está vacía

<!DOCTYPE html> <html> <head> <title>Ejemplo: Verificar si una imagen src está vacía</title> </head> <body>


<img id="mi-imagen" src="" alt="Mi imagen">
<script>

var img = document.getElementById("mi-imagen");

if (img.src === "") {

    alert("La imagen está vacía.");

}

img.onerror = function() {

    this.src = 'imagen-predeterminada.png';

}

</script>

</body> </html>

Conclusión

Ahora sabemos cómo verificar si una imagen src está vacía utilizando JavaScript. Esto nos da la oportunidad de realizar la tarea deseada si la imagen no se carga correctamente. Espero que este artículo te haya sido útil y que hayas aprendido algo nuevo.

Preguntas frecuentes

¿Puedo verificar si una imagen src está vacía utilizando jQuery?

Sí, se puede verificar si una imagen src está vacía utilizando jQuery. Podríamos utilizar `if ($("#mi-imagen").attr("src") === "")` en lugar de `if (img.src === "")`.

¿Por qué debería verificar si una imagen src está vacía?

Verificar si una imagen src está vacía nos da la oportunidad de realizar la tarea deseada si la imagen no se carga correctamente. Podemos cargar una imagen predeterminada o mostrar un mensaje de error al usuario.

¿Por qué no puedo usar `if (img.complete)` para verificar si una imagen se ha cargado correctamente?

No podemos utilizar `if (img.complete)` porque esta propiedad devuelve `true` incluso si la imagen no se carga correctamente. Por lo tanto, no es una buena forma de verificar si una imagen se ha cargado correctamente.