就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. HTMLImageElement

在此页

HTMLImageElement interface represents an HTML <img> element, providing the properties and methods used to manipulate image elements. 

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="../API/HTMLImageElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLImageElement</text></a></svg></div>
					
  a:hover text { fill: #0095DD; pointer-events: all;}

构造函数

Image()
Image() constructor creates and returns a new HTMLImageElement object representing an HTML <img> element which is not attached to any DOM tree. It accepts optional width and height parameters. When called without parameters, new Image() 相当于调用 document.createElement("img") .

特性

继承的特性来自其父级， HTMLElement .

HTMLImageElement.alt
DOMString that reflects the alt HTML attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded.
HTMLImageElement.complete 只读
返回 布尔 也就是 true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no src value indicating an image to load.
HTMLImageElement.crossOrigin
DOMString specifying the CORS setting for this image element. See CORS 设置属性 for further details. This may be null if CORS is not used.
HTMLImageElement.currentSrc 只读
返回 USVString representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.
HTMLImageElement.decoding
An optional DOMString representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: sync to decode the image synchronously, async to decode it asynchronously, or auto to indicate no preference (which is the default). Read the decoding page for details on the implications of this property's values.
HTMLImageElement.height
An integer value that reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.
HTMLImageElement.isMap
布尔 that reflects the ismap HTML attribute, indicating that the image is part of a server-side image map. This is different from a client-side image map, specified using an <img> element and a corresponding <map> which contains <area> elements indicating the clickable areas in the image. The image must be contained within an <a> element; see the ismap page for details.
HTMLImageElement.loading
DOMString providing a hint to the browser used to optimize loading the document by determining whether to load the image immediately ( eager ) or on an as-needed basis ( lazy ).
HTMLImageElement.naturalHeight 只读
Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0 . This is the height the image would be if it were rendered at its natural full size.
HTMLImageElement.naturalWidth 只读
An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0 . This is the width the image would be if it were rendered at its natural full size.
HTMLImageElement.referrerPolicy
DOMString that reflects the referrerpolicy HTML attribute, which tells the 用户代理 how to decide which referrer to use in order to fetch the image. Read this article for details on the possible values of this string.
HTMLImageElement.sizes
DOMString 反射 sizes HTML attribute. This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the sizes page for details on the format of this string.
HTMLImageElement.src
USVString that reflects the src HTML attribute, which contains the full URL of the image including base URI. You can load a different image into the element by changing the URL in the src 属性。
HTMLImageElement.srcset
USVString 反射 srcset HTML attribute. This specifies a list of candidate images, separated by commas ( ',', U+002C COMMA ). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the srcset page for specifics on the format of the size substring.
HTMLImageElement.useMap
DOMString 反射 usemap HTML attribute, containing the page-local URL of the <map> element describing the image map to use. The page-local URL is a pound (hash) symbol ( # ) followed by the ID of the <map> element, such as #my-map-element 。 <map> in turn contains <area> elements indicating the clickable areas in the image.
HTMLImageElement.width
An integer value that reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels.
HTMLImageElement.x 只读
An integer indicating the horizontal offset of the left border edge of the image's CSS layout box relative to the origin of the <html> element's containing block.
HTMLImageElement.y 只读
The integer vertical offset of the top border edge of the image's CSS layout box relative to the origin of the <html> element's containing block.

过时特性

HTMLImageElement.align
DOMString indicating the alignment of the image with respect to the surrounding context. The possible values are "left" , "right" , "justify" ，和 "center" . This is obsolete; you should instead use CSS (such as text-align , which works with images despite its name) to specify the alignment.
HTMLImageElement.border
DOMString which defines the width of the border surrounding the image. This is deprecated; use the CSS border 特性代替。
HTMLImageElement.hspace

An integer value which specifies the amount of space (in pixels) to leave empty on the left and right sides of the image.

HTMLImageElement.longDesc
USVString specifying the URL at which a long description of the image's contents may be found. This is used to turn the image into a hyperlink automatically. Modern HTML should instead simply place an <img> inside an <a> element defining the hyperlink.
HTMLImageElement.lowSrc
USVString specifying the URL of a low-quality (but faster to load) version of the same image. This was once used by browsers under constrained network conditions or on slow devices.
HTMLImageElement.name
DOMString representing the name of the element.
HTMLImageElement.vspace

An integer value specifying the amount of empty space, in pixels, to leave above and below the image.

方法

继承的特性来自其父级， HTMLElement .

HTMLImageElement.decode()
返回 Promise that resolves when the image is decoded and it's safe to append the image to the DOM. This prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the DOM.

错误

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called. This can happen in a number of situations, including:

  • src attribute is empty or null .
  • 指定 src URL is the same as the URL of the page the user is currently on.
  • The specified image is corrupted in some way that prevents it from being loaded.
  • The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes.
  • The specified image is in a format not supported by the 用户代理 .

范例 

var img1 = new Image(); // Image constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // Use DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// using first image in the document
alert(document.images[0].src);

规范

规范 状态 注释
CSSOM (CSS 对象模型) 视图模块
The definition of 'Extensions to HTMLImageElement' in that specification. 		工作草案 添加 x and y 特性。
HTML 实时标准
The definition of 'HTMLImageElement' in that specification. 		实时标准 The following properties have been added: srcset , currentSrc and sizes .
HTML5
The definition of 'HTMLImageElement' in that specification. 		推荐 A constructor (with 2 optional parameters) has been added.
The following properties are now obsolete: 名称 , border , align , hspace , vspace ，和 longdesc .
The following properties are now unsigned long ，而不是 long : height ，和 width .
The following properties have been added: crossorigin , naturalWidth , naturalHeight ，和 complete .
DOM (文档对象模型) 2 级 HTML 规范
The definition of 'HTMLImgElement' in that specification. 		过时 lowSrc property has been removed.
The following properties are now long ，而不是 DOMString : height , width , hspace ，和 vspace .
DOM (文档对象模型) 1 级规范
The definition of 'HTMLImgElement' in that specification. 		过时 初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
HTMLImageElement Chrome 1 Edge 12 Firefox 1 IE 8 Opera 8 Safari 3 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
Image() 构造函数 Chrome 1 Edge 12 Firefox 1 IE 8 Opera 8 Safari 10.1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android ? Safari iOS 1 Samsung Internet Android 1.0
align Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
alt Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
border Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
complete Chrome 1 Edge 12 Firefox Yes IE 8 注意事项
8 注意事项
IE reports false for broken images.
Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
crossOrigin Chrome 13 Edge 12 Firefox Yes IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
currentSrc Chrome 45 Edge 13 Firefox 38 IE 不支持 No Opera Yes Safari 10.1 WebView Android 45 Chrome Android 45 Firefox Android 38 Opera Android 不支持 No Safari iOS 10.3 Samsung Internet Android 5.0
decode() Chrome 64 Edge ≤79 Firefox 68 IE ? Opera Yes Safari 11.1 WebView Android 64 Chrome Android 64 Firefox Android 68 Opera Android ? Safari iOS 11.3 Samsung Internet Android 9.0
decoding Chrome 65 Edge ≤79 Firefox 63 IE 不支持 No Opera Yes Safari 11.1 WebView Android 65 Chrome Android 65 Firefox Android 63 Opera Android ? Safari iOS 11.3 Samsung Internet Android 9.0
error event Chrome 不支持 No Edge 不支持 No Firefox 51 注意事项
51 注意事项
May also be supported in earlier versions.
IE 不支持 No Opera Yes Safari Yes WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 51 Opera Android Yes Safari iOS Yes Samsung Internet Android 不支持 No
height Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
hspace Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
isMap Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
loading Chrome 76 Edge 79 Firefox 75 IE 不支持 No Opera 63 Safari 不支持 No 注意事项
No 注意事项
见 bug 196698
WebView Android 不支持 No Chrome Android 76 Firefox Android 不支持 No Opera Android 54 Safari iOS 不支持 No 注意事项
No 注意事项
见 bug 196698
Samsung Internet Android 不支持 No
longDesc Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
lowSrc Chrome 1 Edge ≤18 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Yes
名称 Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
naturalHeight Chrome 1 Edge 12 Firefox Yes IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
naturalWidth Chrome 1 Edge 12 Firefox Yes IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android ? Safari iOS Yes Samsung Internet Android Yes
onerror Chrome 不支持 No Edge 不支持 No Firefox 51 注意事项
51 注意事项
May also be supported in earlier versions.
IE 不支持 No Opera Yes Safari Yes WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 51 Opera Android Yes Safari iOS Yes Samsung Internet Android 不支持 No
referrerPolicy Chrome 51 Edge 79 Firefox 50 IE 不支持 No Opera 38 Safari 11.1 WebView Android 51 Chrome Android 51 Firefox Android 50 Opera Android 41 Safari iOS 不支持 No Samsung Internet Android 5.0
sizes Chrome 45 Edge 13 Firefox 38 IE 不支持 No Opera Yes Safari 不支持 No WebView Android 45 Chrome Android 45 Firefox Android 38 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 5.0
src Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
srcset Chrome 34 Edge 12 Firefox 38 IE 不支持 No Opera 21 Safari 8 WebView Android 37 Chrome Android 34 Firefox Android 38 Opera Android 不支持 No Safari iOS 8 Samsung Internet Android 2.0
useMap Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
vspace Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
width Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
x Chrome 1 Edge 12 Firefox 14
14
? — 7
IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 14
14
? — 7
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
y Chrome 1 Edge 12 Firefox 14
14
? — 7
IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 14
14
? — 7
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

  • The HTML element implementing this interface: <img>

元数据

  • 最后修改：
  1. HTMLImageElement
  2. 构造函数
    1. Image()
  3. 特性
    1. align
    2. alt
    3. border
    4. complete
    5. crossOrigin
    6. currentSrc
    7. decoding
    8. height
    9. hspace
    10. loading
    11. longDesc
    12. lowSrc
    13. 名称
    14. naturalWidth
    15. referrerPolicy
    16. sizes
    17. srcset
    18. useMap
    19. vspace
    20. width
  4. 方法
    1. decode()
  5. 继承：
    1. HTMLElement
    2. 元素
    3. 节点
    4. EventTarget
  6. 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. 历史
    80. ImageData
    81. 定位
    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

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1