L'interface  HTMLImageElement fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments <img> .

Propriétés

Hérite les propriétés de son parent, HTMLElement

HTMLImageElement.align
Est une DOMString (chaîne de caractères) qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont "left"(gauche)"right"(droite)"justify"(justifié), et "center"(centré) .
HTMLImageElement.alt
Est une DOMString (chaîne de caractères) qui reflète les attributs HTML alt , ceux-ci indiquant le recul du contexte de l'image.
HTMLImageElement.border
Est une DOMString (chaîne de caractères) qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS border est utilisée à la place.
HTMLImageElement.complete Lecture seule
Retourne un Boolean (booléen) qui est true (vrai) si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur src .
HTMLImageElement.crossOrigin
Est une DOMString (chaîne de caractères) représentant le paramètre CORS défini pour cet élément image. Voir Attributs de règlage du CORS pour plus de détails.
HTMLImageElement.currentSrc Lecture seule
Retourne une DOMString (chaîne de caractères) représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).
HTMLImageElement.height
Est un unsigned long (non signé long) qui reflète l'attibut HTML height indiquant la hauteur du rendu de l'image en pixels CSS.
HTMLImageElement.hspace
Est un long représentant l'espace de chaque côté de l'image.
HTMLImageElement.isMap
Est un Boolean (booléen) qui reflète l'attribut HTML ismap indiquant que l'image fait partie d'une carte d'image côté serveur.
HTMLImageElement.longDesc
Est une DOMString (chaîne de caractères) représentant l'URL d'une longue description de l'image.
HTMLImageElement.lowSrc
Est une DOMString  (chaîne de caractères) qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.
HTMLImageElement.name
Est une DOMString (chaîne de caractères) représentant le nom de l'élément.
HTMLImageElement.naturalHeight Lecture seule
Retourne un unsigned long  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.
HTMLImageElement.referrerPolicy
Est une DOMString (chaîne de caractères) qui reflète l'attribut HTML referrerpolicy  indiquant la référence à utiliser pour récupérer l'image.
HTMLImageElement.src
Est une DOMString (chaîne de caractères) qui reflète l'attribut HTML  src contenant l'URL complète de l'image y compris l'URI de base.
HTMLImageElement.sizes
Est une DOMString (chaîne de caractères) reflétant l'attribut HTML sizes (taille).
HTMLImageElement.srcset
Est une DOMString (chaîne de caractères) reflétant l'attribut HTML srcset , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un 'w'  avec la largeur de l'image ou d'un 'x'  avec la densité en pixels.
HTMLImageElement.useMap
Est une DOMString (chaîne de caractères) qui reflète l'attribut HTML usemap contenant une URL partielle d'un élément "map" (carte).
HTMLImageElement.vspace
Est un long représentant l'espace au-dessus et en-dessous de l'image.
HTMLImageElement.width
Est un unsigned long qui reflète l'attribut HTML width indiquant la largeur rendue de l'image en pixels CSS.
HTMLImageElement.x Lecture seule
Retourne un long  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
HTMLImageElement.y Lecture seule
Retourne un long représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.

Méthodes

Hérite les propriétés de son parent, HTMLElement.

Image()
Le constructeur d'image, comprend deux propriétés unsigned  et long , qui sont la largeur et la hauteur de la ressource, et crée une instance de HTMLImageElement , non insérée dans une arborescence DOM.

Erreurs

Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements onerror a été configuré pour gérer les évènements error , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :

  • L'attribut  src est vide ou null.
  • L'URL spécifiée de src  est la même que l'URL de la page actuelle de l'utilisateur.
  • L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.
  • Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions,  et aucune dimension n'est spécifiée dans les attributs de l'élément <img>.
  • L'image spécifiée est dans un format non supporté par l'"user agent".

Exemple

var img1 = new Image(); //  Constructeur HTML5
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

var img2 = document.createElement('img'); // utilise DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);

// en utilisant la première image dans le document
alert(document.images[0].src);

Spécifications

Spécification Statut Commentaire
Referrer Policy
La définition de 'referrer attribute' dans cette spécification.
Brouillon de l'éditeur Ajoute la propriété referrerPolicy .
CSS Object Model (CSSOM) View Module
La définition de 'Extensions to HTMLImageElement' dans cette spécification.
Version de travail Ajoute les propriétés x ety .
HTML Living Standard
La définition de 'HTMLImageElement' dans cette spécification.
Standard évolutif Les propriétés suivantes sont ajoutées : srcset, currentSrc et sizes.
HTML5
La définition de 'HTMLImageElement' dans cette spécification.
Recommendation Un constructeur (avec 2 paramètres facultatifs) est ajouté.
Les propriétés suivantes sont maintenant obsolètes : name, border, align, hspace, vspace, et longdesc.
Les propriétés suivantes sont maintenant unsigned et long, iau lieu de long: height et width.
Les propriétés suivantes ont été ajoutées : crossorigin, naturalWidth, naturalHeight et complete.
Document Object Model (DOM) Level 2 HTML Specification
La définition de 'HTMLImgElement' dans cette spécification.
Obsolete La propriété lowSrc a été supprimée.
La propriété est maintenant long, au lieu des DOMString: height, width, hspace et vspace.
Document Object Model (DOM) Level 1 Specification
La définition de 'HTMLImgElement' dans cette spécification.
Obsolete définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Oui) (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
lowSrc (Oui) (Oui) (Oui) ? (Oui) (Oui)
naturalWidth, naturalHeight (Oui) (Oui) (Oui) 9 (Oui) (Oui)
crossorigin (Oui) (Oui) (Oui) 9 (Oui) (Oui)
complete (Oui) (Oui) (Oui) 5[4] (Oui) (Oui)
srcset 34 (Oui) 32 (32)[2] Pas de support 21 7.1
currentSrc (Oui) (Oui) 32 (32)[2] Pas de support (Oui) Pas de support
sizes (Oui) (Oui) 33 (33)[3] Pas de support (Oui) Pas de support
x and y (Oui) (Oui) 14[1] Pas de support (Oui) (Oui)
referrerPolicy 51 Pas de support 50 (50) Pas de support Pas de support Pas de support
onerror event handler Pas de support ? 51 (51)[5] Pas de support (Oui) (Oui)
Fonctionnalité Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Oui) (Oui) (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)
lowSrc (Oui) (Oui) (Oui) ? ? ? ?
naturalWidth, naturalHeight (Oui) (Oui) (Oui) ? 9 ? (Oui)
crossorigin (Oui) (Oui) (Oui) (Oui) ? ? (Oui)
complete (Oui) (Oui) (Oui) (Oui) ? ? (Oui)
srcset 34 34 (Oui) 32.0 (32)[2] Pas de support Pas de support iOS 8
currentSrc (Oui) (Oui) (Oui) 32.0 (32)[2] Pas de support Pas de support Pas de support
sizes (Oui) (Oui) (Oui) 33.0 (33)[3] Pas de support Pas de support Pas de support
x and y (Oui) (Oui) (Oui) 14[1] Pas de support (Oui) (Oui)
referrerPolicy 51 51 Pas de support 50.0 (50) Pas de support Pas de support Pas de support
onerror event handler Pas de support Pas de support ? 51.0 (51) Pas de support (Oui) (Oui)

[1] Cependant, ces propriétés x et y ont été supprimées dans Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) mais plus tard, elles ont été restaurées dans Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) pour des raisons de compatibilité.

[2] Cette fonctionnalité est derrière la préférence dom.image.srcset.enabled , par défaut false(faux).

[3] Cette fonctionnalité est derrière la préférence dom.image.picture.enabled , par défaut false(faux).

[4] IE retourne false pour les images brisées.

[5] Peut également être pris en charge dans les versions antérieures.

Voir aussi

L'élément HTML implémentant cette interface : <img>

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, fscholz, khalid32, teoli, louuis, rm1720
 Dernière mise à jour par : loella16,