HTMLImageElement: Image() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

Image() コンストラクターは、新しい HTMLImageElement インスタンスを作成します。機能的には document.createElement('img') と同等です。

メモ: この関数を CSS の image() 関数と混同しないでください。

構文

js
new Image()
new Image(width)
new Image(width, height)

引数

width 省略可

画像の幅（つまり width 属性に対応する値）です。

height 省略可

画像の高さ（つまり height 属性に対応する値）です。

ビットマップ全体は、コンストラクターで指定されたサイズに関係なく読み込まれます。コンストラクターで指定されたサイズは、結果のインスタンスのプロパティ HTMLImageElement.width と HTMLImageElement.height を通して反映されます。画像の本来の幅と高さは CSS ピクセルで表され、プロパティ HTMLImageElement.naturalWidth と HTMLImageElement.naturalHeight を通して反映されます。コンストラクターでサイズが指定されていない場合、両プロパティのペアは同じ値を持ちます。

例

js
const myImage = new Image(100, 200);
myImage.src = "picture.jpg";
document.body.appendChild(myImage);

これは、 <body> の中で次のような HTML タグを定義するのと同じです。

html

仕様書

Specification

HTML
# dom-image-dev

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年11月8日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTML DOM API
HTMLImageElement
コンストラクター
1. Image()
インスタンスプロパティ
インスタンスメソッド
1. decode()
継承
HTML DOM に関連するページ
ガイド
1. JavaScript で queueMicrotask() によるマイクロタスクの使用
2. In depth: Microtasks and the JavaScript runtime environment

HTMLImageElement: Image() コンストラクター

In this article

構文

引数

使用上の注意

例

仕様書

ブラウザーの互換性

Help improve MDN