Compruebe si un IMG SRC está vacío usando JavaScript

Al diseñar una página o sitio web atractiva, se pueden aplicar ciertas imágenes y efectos para que un sitio web se destaque. En tal caso, el proceso de verificación de si las imágenes están incluidas en una página web o no se vuelve desafiante y requiere mucho tiempo. Sin embargo, puede usar JavaScript en tal situación para mantenerse al día con los requisitos dados y ahorrar tiempo de manera efectiva.

Este artículo demostrará los enfoques para verificar si un IMG SRC está vacío en JavaScript

Cómo verificar si un IMG SRC está vacío usando JavaScript?

Para verificar si un IMG SRC está vacío usando JavaScript, los siguientes se acercan en combinación con el "getAttribute ()Se puede utilizar el método:

• "operador lógico (!)".
• "nulo" tipo de datos.

Discutamos cada uno de los enfoques uno por uno!

Enfoque 1: Verifique si un IMG SRC está vacío en JavaScript usando el operador lógico (!)

El "getAttribute ()El método "proporciona el valor del atributo de un elemento. Mientras que los operadores "lógicos" se utilizan para analizar la lógica entre las variables o valores. Más específicamente, el "lógico no ((!) ”El operador se puede utilizar para verificar si un atributo en particular está incluido o vacío en un elemento.

Sintaxis

elemento.getAttribute (nombre)

En la sintaxis dada:

• "nombre"Se refiere al nombre del atributo.

Ejemplo 1: Verifique un solo atributo SRC en una imagen
En este ejemplo, un atributo específico, yo.mi., SRC, se verificará para el requisito establecido:

En las líneas de código anteriores:

• En primer lugar, especifique el ""Elemento tiene el declarado"identificación".
• En el código JS, acceda al elemento de imagen especificado por su "identificación" utilizando el "getElementById ()" método.
• En el siguiente paso, aplique el "getAttribute ()"Método especificando el atributo"SRC"Como su parámetro, que se verificará para el requisito establecido.
• Después de eso, aplique el "if-else"Condición de tal manera que la declaración anterior especificada en el"si"La condición se muestra en el"SRC"Atributo está vacío en la imagen recuperada.
• En el otro escenario, el "demásSe ejecutará la condición.

Producción

En la salida anterior, se puede observar que el "SRC"El atributo en la imagen está vacío.

Ejemplo 2: Verifique múltiples atributos SRC en las imágenes
En este ejemplo, dos imágenes tienen vacías y no vacías "SRCSe verificarán los atributos:

Aplique los siguientes pasos en el fragmento de código anterior:

• En primer lugar, especifique el ""Elemento tiene el declarado"identificación"Como su atributo.
• Del mismo modo, incluya otro ""Elemento tiene el"SRC" y "identificación"Atributos, respectivamente.
• En el código JavaScript, el acceso incluyó imágenes de su "IDS" en el "getElementById ()" método.
• Después de eso, aplique el "getAttribute ()"Método sobre cada una de las imágenes obtenidas para localizar el"SRC" atributo.
• Ahora, aplique la condición para verificar que si el "SRC"El atributo no está contenido en ambas imágenes, la declaración anterior se muestra con la ayuda del"&&"Operador.
• En el otro escenario, el "demásCondición se ejecuta.

Producción

Se puede ver que el "SRC"El atributo en ambas imágenes no está vacío según lo especificado por el mensaje en la consola.

Enfoque 2: Verifique si un SRC en un IMG está vacío en JavaScript usando un tipo de datos nulo.

El "nulo"El tipo de datos denota un valor nulo. Este tipo de datos se puede utilizar en combinación con el "getAttribute ()Método "y el"igualdad (==)"Operador para verificar el requisito establecido asignando el valor nulo al"SRC"Atribuir y verificarlo.

Ejemplo
El siguiente ejemplo ilustra el concepto declarado:

Ahora, implementa los siguientes pasos en el fragmento de código anterior:

• Recuerde los enfoques discutidos para incluir el ""Elemento y buscarlo a través del"getElementById ()" método.
• Después de eso, del mismo modo, acceda al "SRC"Atributo de la imagen obtenida utilizando el"getAttribute ()" método.
• En el siguiente paso, verifique si el atributo SRC en la imagen está vacío con la ayuda del "nulo" valor.
• En caso de que se cumpla la condición adicional, el código agregado en el "siEl bloque se ejecutará. En el otro escenario, de manera similar, el "demás"La condición entrará en vigencia.

Producción

La salida anterior significa que se cumple el requisito establecido.

Conclusión

El "getAttribute ()"Método en combinación con el"lógico"Operador (!) o el "nuloEl tipo de datos se puede usar para verificar si un IMG SRC está vacío en JavaScript. El enfoque anterior se puede implementar para verificar el "SRCAtributo directamente sobre imágenes simples y múltiples. El último enfoque se puede aplicar para realizar el requisito deseado asignando un "nulo"Valor al atributo recuperado y confirmándolo. Este blog explica cómo verificar si un SRC en un IMG está vacío usando JavaScript.