Controlla se un IMG SRC è vuoto usando JavaScript

Durante la progettazione di una pagina Web o un sito attraente, è possibile applicare alcune immagini ed effetti per far risaltare un sito Web. In tal caso, il processo di controllo se le immagini sono incluse in una pagina Web o meno diventa impegnativo e richiede molto tempo. Tuttavia, è possibile utilizzare JavaScript in una situazione del genere per tenere il passo con i requisiti dati e risparmiare tempo in modo efficace.

Questo articolo dimostrerà gli approcci per verificare se un IMG SRC è vuoto in JavaScript

Come verificare se un IMG SRC è vuoto usando JavaScript?

Per verificare se un IMG SRC è vuoto usando JavaScript, i seguenti si avvicinano in combinazione con "getAttribute ()"Il metodo può essere utilizzato:

• "operatore logico (!)".
• "nullo" tipo di dati.

Discutiamo di ciascuno degli approcci uno per uno!

Approccio 1: verificare se un IMG SRC è vuoto in JavaScript usando l'operatore logico (!)

IL "getAttribute ()"Il metodo fornisce il valore dell'attributo di un elemento. Mentre gli operatori "logici" vengono utilizzati per analizzare la logica tra le variabili o i valori. Più specificamente, il "logico no (!) L'operatore può essere utilizzato per verificare se un attributo particolare è incluso o vuoto in un elemento.

Sintassi

elemento.getAttribute (nome)

Nella sintassi data:

• "nome"Si riferisce al nome dell'attributo.

Esempio 1: verificare un singolo attributo SRC in un'immagine
In questo esempio, un attributo specifico, i.e., SRC, verrà controllato per il requisito dichiarato:

Nelle righe di codice sopra:

• In primo luogo, specificare il “"Elemento con il dichiarato"id".
• Nel codice JS, accedi all'elemento immagine specificato con il suo "id" usando il "getElementById ()" metodo.
• Nel passaggio successivo, applica il "getAttribute ()"Metodo che specifica l'attributo"src"Come parametro, che verrà controllato per il requisito dichiarato.
• Dopodiché, applica il "se altro"Condizione in modo tale che la precedente dichiarazione specificata nel"Se"La condizione viene visualizzata su"src"Attributo essendo vuoto nell'immagine recuperata.
• Nell'altro scenario, il "altro"La condizione verrà eseguita.

Produzione

Nell'output sopra, si può osservare che il "src"L'attributo nell'immagine è vuoto.

Esempio 2: verifica più attributi SRC nelle immagini
In questo esempio, due immagini che hanno vuoto e non vuoto "src"Gli attributi verranno controllati:

Applicare i seguenti passaggi nello snippet di codice sopra:

• In primo luogo, specificare il “"Elemento con il dichiarato"id"Come il suo attributo.
• Allo stesso modo, includi un altro ""Elemento con il"src" E "id"Attributi, rispettivamente.
• Nel codice JavaScript, l'accesso includeva entrambe le immagini per loro "IDS" nel "getElementById ()" metodo.
• Dopodiché, applica il "getAttribute ()"Metodo su ciascuna delle immagini recuperate per individuare il"src"Attributo.
• Ora, applica la condizione per verificarla se il "src"L'attributo non è contenuto in entrambe le immagini, la precedente affermazione viene visualizzata con l'aiuto di"&&"Operatore.
• Nell'altro scenario, il "altro"La condizione esegue.

Produzione

Si può vedere che il "src"L'attributo in entrambe le immagini non è vuoto come specificato dal messaggio sulla console.

Approccio 2: controlla se un SRC in un IMG è vuoto in JavaScript usando Null Datatype.

IL "nullo"Il tipo di dati indica un valore nullo. Questo tipo di dati può essere utilizzato in combinazione con "getAttribute ()Metodo e il "uguaglianza (==)"Operatore per verificare il requisito dichiarato allocando il valore null al"src"Attributo e verificarlo.

Esempio
Il seguente esempio illustra il concetto dichiarato:

Ora, implementa i seguenti passaggi nello snippet del codice sopra:

• Ricorda gli approcci discussi per includere il ""Elemento e prenderlo tramite"getElementById ()" metodo.
• Successivamente, anche, accedi al "src"Attributo dall'immagine recuperata usando il"getAttribute ()" metodo.
• Nel passaggio successivo, controlla se l'attributo SRC nell'immagine è vuoto con l'aiuto di "nullo" valore.
• Nel caso, se la condizione aggiunta è soddisfatta, il codice aggiunto in "Se"Il blocco verrà eseguito. Nell'altro scenario, allo stesso modo, il "altro"La condizione entrerà in vigore.

Produzione

L'output di cui sopra significa che il requisito dichiarato è soddisfatto.

Conclusione

IL "getAttribute ()Metodo in combinazione con il "logico"Operatore (!) o il "nullo"Il tipo di dati può essere utilizzato per verificare se un IMG SRC è vuoto in JavaScript. Il primo approccio può essere implementato per verificare il "src"Attributo direttamente su immagini singole e multiple. Quest'ultimo approccio può essere applicato per eseguire il requisito desiderato assegnando un "nullo"Valore all'attributo recuperato e confermandolo. Questo blog spiega come verificare se un SRC in un IMG è vuoto usando JavaScript.