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

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>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。