DOM
：インターフェイス
：HTMLImageElement インターフェイス
編集：2022.03.08 by T.A.
→MS（en）
HTML <img> 要素を表し、画像要素の操作に使用されるプロパティとメソッドを提供します。
コンストラクター
- new Image()
- Image() コンストラクターは、DOMツリーにアタッチされていないHTML <img> 要素を表す新しい HTMLImageElement オブジェクトを作成して返します。オプションの幅と高さのパラメータを受け入れます。パラメータなしで呼び出された場合、new Image() は、document.createElement("img") を呼び出すのと同じです。
プロパティ
親である HTMLElement からプロパティを継承します。
- HTMLImageElement.alt
- alt HTML属性を反映するDOMString。したがって、画像がロードされていない場合に表示される代替フォールバック コンテンツを示します。
- HTMLImageElement.complete 読取専用
- ブラウザが画像のフェッチを終了した場合にtrueとなるブール値を返します。成功したかどうか。つまり、この値は、ロードするイメージを示す src 値がイメージにない場合にも当てはまります。
- HTMLImageElement.crossOrigin
- この画像要素のCORS設定を指定するDOMString。詳細については、CORS設定属性を参照してください。 CORSが使用されていない場合、これは null になる可能性があります。
- HTMLImageElement.currentSrc 読取専用
- 現在表示されている画像がロードされたURLを表すUSVStringを返します。これは、適切なメディア クエリによって指示されたように、条件の変更によって画像が調整されるときに変更される可能性があります。
- HTMLImageElement.decoding
- 画像をデコードする方法についてブラウザに提供されるヒントを表すオプションのDOMString。この値を指定する場合は、許可されている値の 1 つである必要があります。画像を同期的にデコードするには sync、非同期でデコードする場合はasync、プリファレンスがないことを示す場合は auto（デフォルト）。このプロパティの値の影響の詳細については、デコード ページをお読みください。
- HTMLImageElement.height
- height HTML属性を反映する整数値。CSSピクセルでレンダリングされた画像の高さを示します。
- HTMLImageElement.isMap
- ismap HTML属性を反映するブール値。これは、画像がサーバー側の画像マップの一部であることを示します。これは、クライアント側のイメージマップとは異なります。<img>要素と、画像内のクリック可能な領域を示す <area>要素を含む対応する <map> を使用して指定します。 画像は <a>要素内に含まれている必要があります。詳細については、ismapページを参照してください。
- HTMLImageElement.loading
- 画像をすぐに読み込むか（熱心に）、必要に応じて読み込むか（遅延）を決定することにより、ドキュメントの読み込みを最適化するために使用されるブラウザにヒントを提供するDOMString。
- HTMLImageElement.naturalHeight 読取専用
- 画像の固有の高さをCSSピクセルで表す整数値を返します。利用可能な場合、それ以外の場合は、0を示します。
これは、画像が自然なフルサイズでレンダリングされた場合の高さです。
- HTMLImageElement.naturalWidth 読取専用
- 画像の固有の幅をCSSピクセルで表す整数値。利用可能な場合、それ以外は 0 が表示されます。
これは、自然なフルサイズでレンダリングされた場合の画像の幅です。
- HTMLImageElement.referrerPolicy
- referrerpolicy HTML属性を反映するDOMString、これは、画像をフェッチするために使用するリファラーを決定する方法をユーザー エージェントに指示します。この文字列の可能な値の詳細については、この記事をお読みください。
- HTMLImageElement.sizes
- サイズのHTML属性を反映するDOMString。この文字列は、画像のコンマ区切りの条件付きサイズのリストを指定します。あれは、特定のビューポート サイズに対して、特定の画像サイズが使用されます。この文字列の形式の詳細については、HTMLImageElement.sizes ページのドキュメントをお読みください。
- HTMLImageElement.src
- srcHTML属性を反映するUSVString。これには、ベース URI を含む画像の完全な URL が含まれます。src 属性の URL を変更することで、別の画像を要素に読み込むことができます。
- HTMLImageElement.srcset
- srcsetHTML属性を反映するUSVString。これは、コンマ（','、U + 002C COMMA）で区切られた候補画像のリストを指定します。各候補画像は、URLの後にスペースが続き、その後に画像のサイズを示す特別にフォーマットされた文字列が続きます。サイズは、幅またはサイズの倍数で指定できます。 サイズ部分文字列の形式の詳細については、srcsetページをお読みください。
- HTMLImageElement.useMap
- usemap HTML属性を反映するDOMString。使用する画像マップを説明する <map> 要素のページ ローカル URL を含みます。ページローカル URL は、ポンド（ハッシュ）記号「#」の後に <map> 要素の ID が続きます。#my-map-element など。次に、<map> には、画像内のクリック可能な領域を示す <area> 要素が含まれます。
- HTMLImageElement.width
- 幅のHTML属性を反映する整数値。画像のレンダリングされた幅をCSSピクセルで示します。
- HTMLImageElement.x 読取専用
- <html> 要素を含むブロックの原点を基準にした画像の CSS レイアウト ボックスの左ボーダー エッジの水平オフセットを示す整数。
- HTMLImageElement.y 読取専用
- <html> 要素を含むブロックの原点を基準にした、画像の CSS レイアウト ボックスの上部境界エッジの整数の垂直オフセット。
廃止されたプロパティ
- HTMLImageElement.align 廃止
- 周囲のコンテキストに対する画像の配置を示すDOMString。可能な値は、「left」、「right」、「justify」、および「center」です。これは廃止されました。代わりにCSSを使用する必要があります（text-align、名前に関係なく画像で機能します）配置を指定します。
- HTMLImageElement.border 廃止
- 画像を囲む境界線の幅を定義するDOMString。これは非推奨です。代わりに CSS の border プロパティを使用してください。
- HTMLImageElement.hspace 廃止
- 画像の左側と右側で空のままにするスペースの量（ピクセル単位）を指定する整数値。
- HTMLImageElement.longDesc 廃止
- 画像の内容の長い説明が見つかるURLを指定するUSVString。これは、画像を自動的にハイパーリンクに変換するために使用されます。最新のHTMLは、代わりにハイパーリンクを定義する <a>要素内に <img> を配置する必要があります。
- HTMLImageElement.name 廃止
- 要素の名前を表すDOMString。
- HTMLImageElement.vspace 廃止
- 空のスペースの量を指定する整数値。ピクセル単位で、画像の上下に残します。
メソッド
親であるHTMLElementからプロパティを継承します。
- HTMLImageElement.decode()
- 画像がデコードされ、画像をDOMに安全に追加したときに解決されるPromiseを返します。これにより、画像をデコードするために次のフレームのレンダリングを一時停止する必要がなくなり、デコードされていないイメージがDOMに追加された場合と同じように。
エラー
イメージのロードまたはレンダリングの試行中にエラーが発生し、エラーイベントを処理するようにonerrorイベントハンドラーが構成されている場合、そのイベント ハンドラーが呼び出されます。これは、さまざまな状況で発生する可能性があります。含む：
- src属性が空またはnullです。
- 指定されたsrc URLは、ユーザーが現在表示しているページのURLと同じです。
- 指定されたイメージは、ロードできない何らかの方法で破損しています。
- 指定された画像のメタデータが破損しているため、そのディメンションを取得できず、
![]()
要素の属性にディメンションが指定されていません。
- 指定された画像は、ユーザー エージェントでサポートされていない形式です。
例
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);
テスト
ここに表示