この翻訳は不完全です。英語から この記事を翻訳 してください。

HTMLImageElement インターフェイスは、 <img> 要素を操作するための特別なプロパティとメソッドを提供します。

コンストラクタ

Image()
The Image() constructor, taking two optional unsigned longs, which are the width and the height of the resource, creates an instance of HTMLImageElement, not inserted in a DOM tree.
Functionally equivalent to calling document.createElement("img").

プロパティ

Inherits properties from its parent, HTMLElement.

HTMLImageElement.align
Is a DOMString indicating the alignment of the image with respect to the surrounding context. The possible values are "left", "right", "justify", and "center".
HTMLImageElement.alt
Is a DOMString that reflects the alt HTML attribute, thus indicating fallback context for the image.
HTMLImageElement.border
Is a DOMString that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS border property should be used instead.
HTMLImageElement.complete 読取専用
Returns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src value.
HTMLImageElement.crossOrigin
Is a DOMString representing the CORS setting for this image element. See CORS settings attributes for further details.
HTMLImageElement.currentSrc 読取専用
Returns a DOMString representing the URL to the currently displayed image (which may change, for example in response to media queries).
HTMLImageElement.decoding
Returns a DOMString representing a hint given to the browser on how it should decode the image.
HTMLImageElement.height
Is a unsigned long that reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.
HTMLImageElement.hspace
Is a long representing the space on either side of the image.
HTMLImageElement.isMap
Is a Boolean that reflects the ismap HTML attribute, indicating that the image is part of a server-side image map.
HTMLImageElement.longDesc
Is a DOMString representing the URI of a long description of the image.
HTMLImageElement.lowSrc
Is a DOMString that refers to a low-quality (but faster to load) copy of the image.
HTMLImageElement.name
Is a DOMString representing the name of the element.
HTMLImageElement.naturalHeight 読取専用
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
HTMLImageElement.naturalWidth 読取専用
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
HTMLImageElement.referrerPolicy
Is a DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use in order to fetch the image.
HTMLImageElement.src
Is a DOMString that reflects the src HTML attribute, containing the full URL of the image including base URI.
HTMLImageElement.sizes
Is a DOMString reflecting the sizes HTML attribute.
HTMLImageElement.srcset
Is a DOMString reflecting the srcset HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
HTMLImageElement.useMap
Is a DOMString that reflects the usemap HTML attribute, containing a partial URL of a map element.
HTMLImageElement.vspace
Is a long representing the space above and below the image.
HTMLImageElement.width
Is a unsigned long that reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels.
HTMLImageElement.x 読取専用
Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.
HTMLImageElement.y 読取専用
Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.

メソッド

Inherits properties from its parent, HTMLElement.

HTMLImageElement.decode()
Returns a Promise that resolves when the image is decoded and it is safe to append the image to the DOM. This prevents a decoding delay on the next frame.

エラー

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:

  • The src attribute is empty or null.
  • The specified 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 user agent.

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);

仕様

仕様書 ステータス コメント
CSS Object Model (CSSOM) View Module
Extensions to HTMLImageElement の定義
草案 Added the x and y properties.
HTML Living Standard
HTMLImageElement の定義
現行の標準 The following properties have been added: srcset, currentSrc and sizes.
HTML5
HTMLImageElement の定義
勧告 A constructor (with 2 optional parameters) has been added.
The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
The following properties are now unsigned long, instead of long: height, and width.
The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
Document Object Model (DOM) Level 2 HTML Specification
HTMLImgElement の定義
廃止された The lowSrc property has been removed.
The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
Document Object Model (DOM) Level 1 Specification
HTMLImgElement の定義
廃止された Initial definition.

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HTMLImageElementChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
Image() constructorChrome 完全対応 31Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
alignChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
altChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
borderChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
completeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 5
補足
完全対応 5
補足
補足 IE reports false for broken images.
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
crossoriginChrome 完全対応 13Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
currentSrc
実験的
Chrome 完全対応 45Edge 完全対応 13Firefox 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile 完全対応 ありFirefox Android 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
decode()Chrome 完全対応 64Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari 完全対応 11.1WebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 11.3Samsung Internet Android ?
decodingChrome 完全対応 65Edge ? Firefox 完全対応 63IE 未対応 なしOpera 完全対応 ありSafari 完全対応 11.1WebView Android 完全対応 65Chrome Android 完全対応 65Edge Mobile ? Firefox Android 完全対応 63Opera Android ? Safari iOS 完全対応 11.3Samsung Internet Android ?
heightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
hspaceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
isMapChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
longDescChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
lowSrcChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
nameChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
naturalHeightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
naturalWidthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?
onerrorChrome 未対応 なしEdge ? Firefox 完全対応 51
補足
完全対応 51
補足
補足 May also be supported in earlier versions.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 51Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
referrerPolicyChrome 完全対応 51Edge 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile 未対応 なしFirefox Android 完全対応 50Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android ?
sizes
実験的
Chrome 完全対応 45Edge 完全対応 13Firefox 完全対応 38
完全対応 38
未対応 33 — 52
無効
無効 From version 33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile 完全対応 ありFirefox Android 完全対応 38
完全対応 38
未対応 33 — 52
無効
無効 From version 33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
srcset
実験的
Chrome 完全対応 34Edge 完全対応 12Firefox 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 21Safari 完全対応 8WebView Android 完全対応 37Chrome Android 完全対応 34Edge Mobile 完全対応 ありFirefox Android 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 8Samsung Internet Android ?
srcChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
useMapChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
vspaceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
xChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 14
完全対応 14
未対応 ? — 7
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14
完全対応 14
未対応 ? — 7
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
yChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 14
完全対応 14
未対応 ? — 7
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14
完全対応 14
未対応 ? — 7
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

あわせて参照

  • このインターフェイスを実装する HTML 要素: <img>

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,