Come cambiare la sorgente di immagine Javascript

JavaScript può integrarsi con HTML per soddisfare le esigenze degli utenti. Per integrazione, gli utenti possono utilizzare una funzione per modificare l'origine dell'immagine. Ad esempio, la proprietà SRC viene utilizzata per specificare l'origine dell'immagine. Le fonti possono includere un file system locale e l'URL dell'immagine. Questa guida serve a modificare il file di origine dell'immagine utilizzando la proprietà SRC. Tutti gli ultimi browser supportano la proprietà SRC per individuare l'immagine di origine.

Questo post serve i seguenti risultati di apprendimento:

• Come cambiare la sorgente di immagine in JavaScript
• Esempio 1: Modifica l'origine dell'immagine dell'immagine del file locale in JavaScript
• Esempio 2: Modifica la fonte dell'immagine dell'immagine basata sul web in JavaScript

Come cambiare la sorgente di immagine in JavaScript

JavaScript è essenziale per cambiare dinamicamente la visualizzazione dell'immagine. Ad esempio, il img L'elemento HTML fornisce il src Proprietà per modificare la fonte dell'immagine. La fonte dell'immagine può essere un sistema locale o qualsiasi immagine URL.

Di seguito è riportata la sintassi per applicare la proprietà SRC utilizzando JavaScript:

Sintassi

documento.getElementById ("myImageId").src = "Newsource.png ";

Parametro

La descrizione dei parametri è la seguente:

• myimageid: specifica l'ID immagine.
• src: si riferisce alla fonte dell'immagine.

Esempio 1: Modifica la sorgente dell'immagine dell'immagine locale

Un esempio è adattato per modificare la fonte di un'immagine attraverso il file locale in JavaScript. L'esempio comprende file di codice HTML e JavaScript.

Codice HTML

Esempio per modificare la sorgente dell'immagine in JavaScript

Modifica il pulsante immagine

In questo codice, il src L'attributo viene utilizzato per recuperare l'immagine "computer.jpg". Dopodiché, un "Modifica il pulsante immagine"Viene aggiunto al file HTML che innesca il cambiamenti () metodo. IL cambiamenti () Il metodo è scritto in un file JavaScript.

Codice JavaScript

funzionalità cambia ()
documento.getElementById ("IMGID").src = "libri.jpg ";

In questo codice, il cambiamentirc () Il metodo prende l'elemento usando il suo ID "imgid"E imposta il valore di"src"Attributo di quell'elemento.

Produzione

L'output mostra che dopo aver premuto il "Modifica il pulsante immagine"Il file di origine dell'immagine viene modificato e viene visualizzata la nuova immagine.

Esempio 2: Modifica la fonte dell'immagine di un'immagine basata sul web

Un altro esempio è impiegato per la modifica della fonte dell'immagine attraverso l'URL in JavaScript. Il codice completo è diviso in file HTML e JavaScript.

Codice HTML

Esempio per modificare l'origine dell'immagine Web in JavaScript

Cambia l'immagine

La descrizione del codice è di seguito:

• In primo luogo, il larghezza e altezza dell'immagine sono assegnati all'immagine all'interno tag.
• Dopodiché, il URL di un'immagine è fornita dal src Proprietà per visualizzare l'immagine nella finestra del browser.

Codice JavaScript

funzionalità cambia ()
documento.getElementById ("IMGID").src = "https: // cdn.Pixabay.com/foto/2022/07/28/23/42/Rainbow-7350780__340.jpg ";

In questo codice, il cambiamenti () Il metodo viene utilizzato per attivare un evento quando l'utente fa clic sul pulsante per modificare la fonte dell'immagine.

Produzione

L'output illustra che quando un utente fa clic su "Cambia l'immagine", La nuova immagine viene sostituita con quella esistente.

Conclusione

JavaScript fornisce a src attributo per modificare la sorgente dell'immagine specificando il percorso del file. Ad esempio, il getElemenD () il metodo viene utilizzato per estrarre l'elemento HTML attraverso id, e poi l'SRC La proprietà cambierà l'immagine di origine. Dopo l'estrazione, viene assegnato il nuovo file di immagine di origine. Qui, hai imparato a cambiare la fonte dell'immagine in JavaScript. Per questo, abbiamo dimostrato una serie di esempi in vari scenari.