HTMLImageElement : propriété src
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
La propriété src
de l'interface HTMLImageElement
reflète l'attribut HTML src
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'attribut src
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 contenu src
, soit par programmation en définissant la propriété src
de l'élément.
Si vous utilisez l'attribut de contenu srcset
pour fournir plusieurs options d'image selon la densité de pixels de l'écran, l'URL spécifiée par l'attribut src
est utilisée de deux façons :
- comme solution de repli pour les navigateurs qui ne prennent pas en charge
srcset
; - comme équivalent à la définition d'une image dans
srcset
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 utilisez src
avec à la fois sizes
(ou l'attribut de contenu sizes
) et srcset
pour choisir une image selon la taille de la zone d'affichage, l'attribut src
n'est utilisé que comme solution de repli pour les navigateurs qui ne prennent pas en charge sizes
et srcset
; 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
Utiliser src
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 taille 1x
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 un srcset
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 ignorent src
dans ce cas.
HTML
Résultat
Spécifications
Specification |
---|
HTML> # dom-img-src> |
Compatibilité des navigateurs
Loading…