La propriétésrc de l'interfaceHTMLImageElement reflète l'attribut HTMLsrc qui définit l'image à afficher dans l'élément HTML<img>.

Valeur

Lorsque vous fournissez une seule image, plutôt qu'un ensemble d'images parmi lesquelles le navigateur sélectionne la meilleure correspondance pour la taille de la zone d'affichage (viewport en anglais) et la densité de pixels de l'écran, l'attributsrc est une chaîne de caractères qui indique l'URL de l'image souhaitée. Cela peut être défini soit dans le HTML lui-même via l'attribut de contenusrc, soit par programmation en définissant la propriétésrc de l'élément.

Si vous utilisez l'attribut de contenusrcset pour fournir plusieurs options d'image selon la densité de pixels de l'écran, l'URL spécifiée par l'attributsrc est utilisée de deux façons :

• comme solution de repli pour les navigateurs qui ne prennent pas en chargesrcset ;
• comme équivalent à la définition d'une image danssrcset avec le multiplicateur de taille1x : l'image définie parsrc est utilisée sur les écrans à faible densité (par exemple, les écrans 72 DPI ou 96 DPI classiques).

De plus, si vous utilisezsrc avecà la foissizes (ou l'attribut de contenusizes)etsrcset pour choisir une image selon la taille de la zone d'affichage, l'attributsrc n'est utilisé que comme solution de repli pour les navigateurs qui ne prennent pas en chargesizes etsrcset ; sinon, il n'est pas utilisé.

Exemples

Définir une seule image

HTML

<img  src="grapefruit-slice-332-332.jpg"  width="160"  alt="Slices of grapefruit, looking yummy." />

Résultat

Utilisersrc avec un ensemble d'images

Lorsque vous utilisez un ensemble d'images avec la propriétésrcset,src sert soit de solution de repli pour les anciens navigateurs, soit de taille1x de l'image.

HTML

Résultat

Définir une solution de repli pour la sélection basée sur la zone d'affichage

Lorsque vous utilisez la sélection d'une image depuis unsrcset en fonction de la zone d'affichage, en spécifiant aussi la propriétésizes, la propriétésrc sert de solution de repli pour les navigateurs qui ne prennent pas en charge la sélection basée sur la zone d'affichage. Les navigateurs qui la prennent en charge ignorentsrc dans ce cas.

HTML

Résultat

Spécifications

Compatibilité des navigateurs