JavaScript

img要素を動的に作成して画像を表示する

  1. 最終更新日:
  2. 公開日:

JavaScriptでimg要素picture要素を作成してページに追加することで、動的に画像を表示する方法について解説します。

この記事のポイント

  • createElementメソッドimg要素を作成する
  • 画像パス(URI)や代替テキスト、widthheightのような属性を指定する

img要素を作成する

createElementメソッドを使ってimg要素を作成し、画像パス(画像のURL)のsrc属性を指定することで、動的に画像を追加することができます。

以下の例では、新しいimg要素を作成したら変数img_elementに入れて、属性を設定したあとにid属性content_area」を持つHTML要素へ挿入します。

JavaScript コード例

// 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要素へ挿入します。

JavaScript コード例

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>

記事一覧

関連記事