Verifique se um IMG SRC está vazio usando JavaScript

Ao projetar uma página ou site atraente da Web, certas imagens e efeitos podem ser aplicados para destacar um site. Nesse caso, o processo de verificar se as imagens estão incluídas em uma página da web ou não se torna manualmente desafiador e demorado. No entanto, você pode usar o JavaScript em tal situação para acompanhar os requisitos fornecidos e economizar tempo de maneira eficaz.

Este artigo demonstrará as abordagens para verificar se um IMG SRC está vazio em JavaScript

Como verificar se um IMG SRC está vazio usando JavaScript?

Para verificar se um IMG SRC está vazio usando JavaScript, as seguintes abordagens em combinação com o “getAttribute ()”O método pode ser utilizado:

• ““operador lógico (!)”.
• ““nulo" tipo de dados.

Vamos discutir cada uma das abordagens uma a uma!

Abordagem 1: Verifique se um IMG SRC está vazio em JavaScript usando operador lógico (!)

O "getAttribute ()”O método fornece o valor do atributo de um elemento. Enquanto os operadores "lógicos" são usados ​​para analisar a lógica entre as variáveis ​​ou valores. Mais especificamente, o “lógico não (!) ”O operador pode ser utilizado para verificar se um atributo específico está incluído ou vazio em um elemento.

Sintaxe

elemento.getAttribute (nome)

Na sintaxe dada:

• ““nome”Refere -se ao nome do atributo.

Exemplo 1: Verifique se há um único atributo SRC em uma imagem
Neste exemplo, um atributo específico, eu.e., SRC, será verificado quanto ao requisito declarado:

Nas linhas acima do código:

• Em primeiro lugar, especifique o “”Elemento com o indicado“eu ia”.
• No código JS, acesse o elemento de imagem especificado por seu “eu ia”Usando o“getElementById ()”Método.
• Na próxima etapa, aplique o “getAttribute ()”Método especificando o atributo“src”Como seu parâmetro, que será verificado para o requisito declarado.
• Depois disso, aplique o “if-else“Condição de que a declaração anterior especificada no“seA condição é exibida no “src”Atributo estar vazio na imagem buscada.
• No outro cenário, o “outro“Condição será executada.

Saída

Na saída acima, pode -se observar que o “src”Atributo na imagem está vazio.

Exemplo 2: Verifique se há vários atributos SRC nas imagens
Neste exemplo, duas imagens tendo vazias e não vazias “src”Os atributos serão verificados:

Aplique as seguintes etapas no trecho de código acima:

• Em primeiro lugar, especifique o “”Elemento com o indicado“eu ia”Como atributo.
• Da mesma forma, inclua outro “”Elemento com o“src" e "eu iaAtributos, respectivamente.
• No código JavaScript, o acesso ambos incluíram imagens por seus “ids" no "getElementById ()”Método.
• Depois disso, aplique o “getAttribute ()”Método em cada uma das imagens buscadas para localizar o“src”Atributo.
• Agora, aplique a condição para verificar se o “src”O atributo não está contido nas duas imagens, a declaração anterior é exibida com a ajuda do“&&Operador.
• No outro cenário, o “outroA condição é executada.

Saída

Pode -se ver que o “src”O atributo em ambas as imagens não está vazio, conforme especificado pela mensagem no console.

Abordagem 2: Verifique se um SRC em um IMG está vazio em JavaScript usando o NULL Datatype.

O "nulo”O tipo de dados indica um valor nulo. Este tipo de dados pode ser utilizado em combinação com o “getAttribute ()”Método e o“igualdade (==)Operador para verificar se o requisito declarado alocando o valor nulo para o “src”Atribui e verificando.

Exemplo
O exemplo a seguir ilustra o conceito declarado:

Agora, implemente as seguintes etapas no snippet de código acima:

• Lembre -se das abordagens discutidas para incluir o “”Elemento e buscando -o através do“getElementById ()”Método.
• Depois disso, da mesma forma, acesse o “src”Atributo da imagem buscada usando o“getAttribute ()”Método.
• Na próxima etapa, verifique se o atributo SRC na imagem está vazio com a ajuda do “nulo" valor.
• No caso, se a condição adicionada for satisfeita, o código adicionado no “se”O bloco será executado. No outro cenário, da mesma forma, o “outro”A condição entrará em vigor.

Saída

A saída acima significa que o requisito declarado é atendido.

Conclusão

O "getAttribute ()”Método em combinação com o“lógicoOperador (Operador (!) ou o "nulo”O tipo de dados pode ser usado para verificar se um IMG SRC está vazio em JavaScript. A abordagem anterior pode ser implementada para verificar o “src”Atributo diretamente sobre imagens únicas e múltiplas. A última abordagem pode ser aplicada para executar o requisito desejado, atribuindo um “nulo”Valor para o atributo buscado e confirmando -o. Este blog explica como verificar se um SRC em um IMG está vazio usando JavaScript.