HTMLImageElement

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

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
Es un DOMString que indica el alineamiento de la imagen respecto al contexto que la rodea.
HTMLImageElement.alt
Es un DOMString que refleja el atributo HTML alt, indicando texto de respaldo a la imagen.
HTMLImageElement.border
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 Read only
Devuelve un Boolean 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.
HTMLImageElement.crossOrigin
Es un DOMString representa la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles.
HTMLImageElement.currentSrc Read only
Devuelve un DOMString
HTMLImageElement.height
Es un unsigned long que refleja el atributo HTML height, indica el alto de la imagen en píxeles CSS.
HTMLImageElement.hspace
Es un long que representa el espacio a izquierda y derecha de la imagen.
HTMLImageElement.isMap
Es un Boolean que refleja el atributo HTML ismap, indica que la imagen es parte del mapa de imagen del lado del servidor.
HTMLImageElement.longDesc
Es un DOMString que representa la URI de una larga descripción de la imagen.
HTMLImageElement.lowSrc
Es un DOMString que referencia una copia de la imagen en mala calidad (pero más rápida cargando)
HTMLImageElement.name
Es un DOMString.
HTMLImageElement.naturalHeight 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 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
Es un DOMString que refleja el atributo HTML referrerpolicy indica la referencia a usar para buscar la imagen.
HTMLImageElement.src
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
Es un DOMString
HTMLImageElement.srcset
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
Es un DOMString que refleja el atributo HTML usemap, contiene una URL parcial del mapa del elemento.
HTMLImageElement.vspace
Es un long que representa el espacio sobre y bajo la imagen.
HTMLImageElement.width
Es un unsigned long que refleja el atributo HTML width, indica el ancho de la imagen en píxeles CSS.
HTMLImageElement.x 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 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!
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>
Temas relacionados
  1. HTMLImageElement
  2. Constructor
    1. Image()
  3. Propiedades
    1. decoding [Traducir]
    2. referrerPolicy [Traducir]
  4. Métodos
    1. decode() [Traducir]
  5. Herencia
    1. HTMLElement
    2. Element
    3. Node
    4. EventTarget
  6. Eventos
    1. abort
    2. DOMContentLoaded
    3. afterprint
    4. afterscriptexecute
    5. beforeprint
    6. beforescriptexecute
    7. beforeunload
    8. blur
    9. cancel
    10. change
    11. click
    12. close
    13. connect
    14. contextmenu
    15. error
    16. focus
    17. hashchange
    18. input
    19. invalid
    20. languagechange
    21. load
    22. loadend
    23. loadstart
    24. message
    25. offline
    26. online
    27. open
    28. pagehide
    29. pageshow
    30. popstate
    31. progress
    32. readystatechange
    33. reset
    34. select
    35. show
    36. sort
    37. storage
    38. submit
    39. toggle
    40. unload
    41. loadeddata
    42. loadedmetadata
    43. canplay
    44. playing
    45. play
    46. canplaythrough
    47. seeked
    48. seeking
    49. stalled
    50. suspend
    51. timeupdate
    52. volumechange
    53. waiting
    54. durationchange
    55. emptied
    56. unhandledrejection
    57. rejectionhandled
  7. Páginas relacionadas a HTML DOM
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. GlobalEventHandlers
    5. HTMLAnchorElement
    6. HTMLAreaElement
    7. HTMLAudioElement
    8. HTMLBRElement
    9. HTMLBaseElement
    10. HTMLBaseFontElement
    11. HTMLBodyElement
    12. HTMLButtonElement
    13. HTMLCanvasElement
    14. HTMLContentElement
    15. HTMLDListElement
    16. HTMLDataElement
    17. HTMLDataListElement
    18. HTMLDialogElement
    19. HTMLDivElement
    20. HTMLDocument
    21. HTMLElement
    22. HTMLEmbedElement
    23. HTMLFieldSetElement
    24. HTMLFormControlsCollection
    25. HTMLFormElement
    26. HTMLFrameSetElement
    27. HTMLHRElement
    28. HTMLHeadElement
    29. HTMLHeadingElement
    30. HTMLHtmlElement
    31. HTMLIFrameElement
    32. HTMLInputElement
    33. HTMLIsIndexElement
    34. HTMLKeygenElement
    35. HTMLLIElement
    36. HTMLLabelElement
    37. HTMLLegendElement
    38. HTMLLinkElement
    39. HTMLMapElement
    40. HTMLMediaElement
    41. HTMLMetaElement
    42. HTMLMeterElement
    43. HTMLModElement
    44. HTMLOListElement
    45. HTMLObjectElement
    46. HTMLOptGroupElement
    47. HTMLOptionElement
    48. HTMLOptionsCollection
    49. HTMLOutputElement
    50. HTMLParagraphElement
    51. HTMLParamElement
    52. HTMLPictureElement
    53. HTMLPreElement
    54. HTMLProgressElement
    55. HTMLQuoteElement
    56. HTMLScriptElement
    57. HTMLSelectElement
    58. HTMLShadowElement
    59. HTMLSourceElement
    60. HTMLSpanElement
    61. HTMLStyleElement
    62. HTMLTableCaptionElement
    63. HTMLTableCellElement
    64. HTMLTableColElement
    65. HTMLTableDataCellElement
    66. HTMLTableElement
    67. HTMLTableHeaderCellElement
    68. HTMLTableRowElement
    69. HTMLTableSectionElement
    70. HTMLTemplateElement
    71. HTMLTextAreaElement
    72. HTMLTimeElement
    73. HTMLTitleElement
    74. HTMLTrackElement
    75. HTMLUListElement
    76. HTMLUnknownElement
    77. HTMLVideoElement
    78. HashChangeEvent
    79. History
    80. ImageData
    81. Location
    82. MessageChannel
    83. MessageEvent
    84. MessagePort
    85. Navigator
    86. NavigatorGeolocation
    87. NavigatorID
    88. NavigatorLanguage
    89. NavigatorOnLine
    90. NavigatorPlugins
    91. PageTransitionEvent
    92. Plugin
    93. PluginArray
    94. PopStateEvent
    95. PortCollection
    96. PromiseRejectionEvent
    97. RadioNodeList
    98. Transferable
    99. ValidityState
    100. Window
    101. WindowBase64
    102. WindowEventHandlers
    103. WindowTimers