最終更新日：
公開日：
レシピ
HTML・DOM
img要素を動的に作成して画像を表示する
JavaScriptでimg要素やpicture要素を作成してページに追加することで、動的に画像を表示する方法について解説します。
この記事のポイント
- createElementメソッドでimg要素を作成する
- 画像パス（URI）や代替テキスト、widthとheightのような属性を指定する
目次
img要素を作成する
createElementメソッドを使ってimg要素を作成し、画像パス（画像のURL）のsrc属性を指定することで、動的に画像を追加することができます。
以下の例では、新しいimg要素を作成したら変数img_elementに入れて、属性を設定したあとにid属性「content_area」を持つHTML要素へ挿入します。
JS コード例
// img要素を作成
let img_element = document.createElement('img');
img_element.src = 'image/rhinos.png'; // 画像パス
img_element.alt = 'さいくん'; // 代替テキスト
img_element.width = 200; // 横サイズ（px）
img_element.height = 200; // 縦サイズ（px）
// 指定した要素にimg要素を挿入
let content_area = document.getElementById("content_area");
content_area.appendChild(img_element);このコードを実行すると、id属性「content_area」を持つHTML要素に以下のようにimg要素が追加され、指定したパス（URL）の画像が表示されます。
HTML コード例
<article id="content_area">
<img src="image/rhinos.png" alt="さいくん" width="200" height="200">
</article>picture要素を作成する
picture要素で画像を表示する場合についても、上記と同様にcreateElementメソッドを使って作成することができます。
以下の例ではまずpicture要素を作成し、その後に表示するimg要素とsource要素を1つずつ作成してから、id属性「content_area」を持つHTML要素へ挿入します。
JS コード例
let picture_element = document.createElement('picture');
let img_element = document.createElement('img');
img_element.src = 'image/rhinos.png';
img_element.alt = 'さいくん';
img_element.width = 200;
img_element.height = 200;
// source要素を追加
let source_element = document.createElement('source');
source_element.srcset = 'image/rhinos_s.png';
source_element.media = '(min-width: 800px)';
// picture要素にimg要素とsource要素を追加
picture_element.appendChild(img_element);
picture_element.appendChild(source_element);
// 指定した要素にpicture要素を挿入
let content_area = document.getElementById("content_area");
content_area.appendChild(picture_element);3つの要素を作成した後に、picture要素に子要素としてimg要素とsource要素をappen dChildメソッドで追加してから、最後にid属性「content_area」を持つHTML要素に挿入します。
上記のコードを実行したあとのHTMLコードは次のようになります。
HTML コード例
<article id="content_area">
<picture>
<img src="image/rhinos.png" alt="さいくん" width="200" height="200">
<source srcset="image/rhinos_s.svg" media="(min-width: 800px)">
</picture>
</article>