HTMLImageElement

La interfaz HTMLImageElement provee de propiedas especiales y métodos (más allá de las interfaces HTMLElement, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos <img>.

Propiedades

Heredadas de su padre, HTMLElement.

HTMLImageElement.align (en-US): Es un DOMString que indica el alineamiento de la imagen respecto al contexto que la rodea.
HTMLImageElement.alt (en-US): Es un DOMString que refleja el atributo HTML alt, indicando texto de respaldo a la imagen.
HTMLImageElement.border (en-US): Es un DOMString que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSS border en su lugar.
HTMLImageElement.complete (en-US) Read only: Devuelve un Boolean (en-US) que es true si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelve true si la imagen no tiene valor src (en-US).
HTMLImageElement.crossOrigin (en-US): Es un DOMString representa la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles.
HTMLImageElement.currentSrc (en-US) Read only: Devuelve un DOMString
HTMLImageElement.height (en-US): Es un unsigned long que refleja el atributo HTML height, indica el alto de la imagen en píxeles CSS.
HTMLImageElement.hspace (en-US): Es un long que representa el espacio a izquierda y derecha de la imagen.
HTMLImageElement.isMap (en-US): Es un Boolean (en-US) que refleja el atributo HTML ismap, indica que la imagen es parte del mapa de imagen del lado del servidor.
HTMLImageElement.longDesc (en-US): Es un DOMString que representa la URI de una larga descripción de la imagen.
HTMLImageElement.lowSrc (en-US): Es un DOMString que referencia una copia de la imagen en mala calidad (pero más rápida cargando)
HTMLImageElement.name (en-US): Es un DOMString.
HTMLImageElement.naturalHeight (en-US) Read only: Devuelve un unsigned long que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
HTMLImageElement.naturalWidth (en-US) Read only: Devuelve un unsigned long que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
HTMLImageElement.referrerPolicy (en-US): Es un DOMString que refleja el atributo HTML referrerpolicy indica la referencia a usar para buscar la imagen.
HTMLImageElement.src (en-US): Es un DOMString que refleja el atributo HTML src HTML attribute, contiene la URL completa de la imagen, incluido la base del URI
HTMLImageElement.sizes (en-US): Es un DOMString
HTMLImageElement.srcset (en-US): Es un DOMString que refleja el atributo HTML srcset, contiene una ista de imágenes candidatas, separadas por una coma (',', U+002C COMMA). Una imagen candidata es una URL seguida por 'w' con el ancho, o una 'x' seguida de la densidad del píxel.
HTMLImageElement.useMap (en-US): Es un DOMString que refleja el atributo HTML usemap, contiene una URL parcial del mapa del elemento.
HTMLImageElement.vspace (en-US): Es un long que representa el espacio sobre y bajo la imagen.
HTMLImageElement.width (en-US): Es un unsigned long que refleja el atributo HTML width, indica el ancho de la imagen en píxeles CSS.
HTMLImageElement.x (en-US) Read only: Devuelve un long que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
HTMLImageElement.y (en-US) Read only: Devuelve un long que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.

Métodos

Heredados de su padre, HTMLElement.

Image(): El constructor Image(), toma dos unsigned long opcionales, ancho y alto del recurso, crea una instacia de creates HTMLImageElement no insertada en el árbol DOM.

Ejemplo

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

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

// Usando la primera imagen en el documento
alert(document.images[0].src);

Especificiaciones

Especicifación	Estado	Comentario
Referrer Policy La definición de 'referrer attribute' en esta especificación.	Candidate Recommendation	Añadida la propiedad `referrerPolicy`.
CSS Object Model (CSSOM) View Module La definición de 'Extensions to HTMLImageElement' en esta especificación.	Working Draft	Añadidas propiedades `x` e `y`
HTML Living Standard La definición de 'HTMLImageElement' en esta especificación.	Living Standard	Las siguientes propiedades han sido añadidas: `srcset`, `currentSrc` y `sizes`.
HTML5 La definición de 'HTMLImageElement' en esta especificación.	Recommendation	Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: `name`, `border`, `align`, `hspace`, `vspace`, y `longdesc`. Las siguientes propiedades son ahora `unsigned long`, en lugar de `long`: `height`, y width.Las siguientes propiedades fueron añadidas: `crossorigin`, `naturalWidth`, `naturalHeight`, `y` `complete`.
Document Object Model (DOM) Level 2 HTML Specification La definición de 'HTMLImgElement' en esta especificación.	Obsolete	La propiedad `lowSrc` fue eliminada. Las siguientes propiedades son ahora `long`, en lugar de `DOMString`: `height`, `width`, `hspace`, y `vspace`.
Document Object Model (DOM) Level 1 Specification La definición de 'HTMLImgElement' en esta especificación.	Obsolete	Definición inicial.

Compatibilidad con navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Soporte básico	(Yes)	1.0 (1.7 o anterior)	(Yes)	(Yes)	(Yes)
`lowSrc`	(Yes)	(Yes)	?	(Yes)	(Yes)
`naturalWidth`, `naturalHeight`	(Yes)	(Yes)	9	(Yes)	(Yes)
`crossorigin`	(Yes)	(Yes)	?	(Yes)	(Yes)
`complete`	(Yes)	(Yes)	5^[4]	(Yes)	(Yes)
`srcset`	34	32 (32)^[2]	Sin soporte	21	7.1
`currentSrc`	(Yes)	32 (32)^[2]	Sin soporte	(Yes)	Sin soporte
`sizes`	(Yes)	33 (33)^[3]	Sin soporte	(Yes)	Sin soporte
`x` e `y`	(Yes)	14^[1]	Sin soporte	(Yes)	(Yes)
`referrerPolicy`	Sin soporte	42 (42) [5]	Sin soporte	Sin soporte	Sin soporte

Característica	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Soporte básico	(Yes)	1.0 (1.0)	(Yes)	(Yes)	(Yes)
`lowSrc`	?	?	?	?	?
`naturalWidth`, `naturalHeight`	?	?	9	?	(Yes)
`crossorigin`	?	(Yes)	?	?	(Yes)
`complete`	?	(Yes)	?	?	(Yes)
`srcset`	Sin soporte	32.0 (32)^[2]	Sin soporte	Sin soporte	iOS 8
`currentSrc`	Sin soporte	32.0 (32)^[2]	Sin soporte	Sin soporte	Sin soporte
`sizes`	Sin soporte	33.0 (33)^[3]	Sin soporte	Sin soporte	Sin soporte
`x` e `y`	(Yes)	14^[1]	Sin soporte	(Yes)	(Yes)
`referrerPolicy`	Sin soporte	42.0 (42) [5]	Sin soporte	Sin soporte	Sin soporte

[1] Las propiedades x e y fueron eliminadas en Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) pero reestablecidas en Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) por razones de compatibilidad.

[2] Esta característica está detras de la preferencia dom.image.srcset.enabled, por defecto false.

[3] Esta característica está detras de la preferencia dom.image.picture.enabled, por defecto false.

[4] IE reporta false para imágenes rotas.

[5] Esta propiedad fue nombrada referrer desde Firefox 42 a 44.

Ver también

El elemento HTML implementa esta interfaz: <img>