Proprietà src di HTML <img>

Tag HTML <img>

Definizione e uso

Obbligatorio src attributo che definisce l'URL dell'immagine.

Ci sono due metodi per specificare l'URL dell'attributo src Specificare l'URL nell'attributo:

1. URL assoluto - Link all'immagine ospitata su altri siti web. Ad esempio:

src="https://www.codew3c.com/images/img_girl.jpg"

Attenzione:Le immagini esterne possono essere protette da copyright. Se non hai ottenuto l'autorizzazione per usarle, potresti violare la legge sul copyright. Inoltre, non puoi controllare le immagini esterne; potrebbero essere rimossi o modificati all'improvviso.

2. URL relativo - Link all'immagine ospitata nel sito web.

In questo caso, l'URL non include il dominio. Se l'URL non inizia con una barra obliqua, è relativo alla pagina corrente. Ad esempio:

src="img_girl.jpg".

Se l'URL inizia con una barra obliqua, è relativo al dominio. Ad esempio:

src="/images/img_girl.jpg".

Suggerimento:È probabilmente meglio utilizzare URL relativi. Se cambi il dominio, non si verificherà una rottura del link.

Attenzione:Se il browser non trova l'immagine, mostrerà l'icona del link danneggiato e il testo alt.

Suggerimento:Per organizzare la memorizzazione dei documenti, i creatori di solito mettono i file delle immagini in una cartella separata e di solito li chiamano "pics" o "images" o simili. Nei tutorial online di CodeW3C.com, gli ingegneri mettono la maggior parte delle immagini di uso comune in una cartella chiamata "i", che è l'abbreviazione di "images". Questo metodo ha il vantaggio di semplificare al massimo il percorso.

Esempio

Nello esempio seguente, abbiamo inserito una foto di tulipani scattata da ingegneri di CodeW3C.com nel Shanghai Fresh Flower Port nella pagina. Il nome del file dell'immagine è "eg_tulip.jpg", conservato nella cartella "i" sul server. Questo è il codice sorgente:

<img src="/i/eg_tulip.jpg" />

L'effetto del codice sopra riportato è:


Prova da solo

Suggerimento:Puoi provarlo nel nostro strumento di test onlineProva da soloSe sostituite il nome del file nell'esempio con "eg_chinarose.jpg", vedrete una foto di una rosa cinese. Ecco come appare:

Codice sorgente:

<img src="/i/eg_chinarose.jpg" />

L'effetto del codice sopra riportato è:

Sintassi

<img src="URL">

Valore dell'attributo

Valore Descrizione
URL

Definisce l'URL dell'immagine.

Valori possibili:

  • URL assoluto - Indica un altro sito web (ad esempio src="http://www.example.com/image.gif")
  • URL relativo - Indica un file all'interno del sito web (ad esempio src="image.gif")

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Tag HTML <img>