日曜エンジニアのIT道場
ITを学び、DXに備える
    JavaScript

    【JavaScript】imgタグを生成して画像を表示する方法

    「JavaScriptを使えば、HTMLを書かなくても、画像を表示することができます!」

     

    この記事では、JavaScriptを使って、タグの生成を行い、画像を表示するプログラムのサンプルコードと解説をします。

     

    まずはサンプルコードです。

    見ての通り、HTMLは書いていません。

    See the Pen
    HTMLタグの生成と属性の追加
    by MacLove (@maclove1)
    on CodePen.

    このように、JavaScriptを使えば、imgタグを生成して画像を表示することができるのです。

     

    流れとしては、

    1. タグの生成
    2. 属性の追加
    3. タグの挿入

    となります。

     

    解説です。

    JavaScriptでimgタグを生成して画像を表示する

    JavaScriptで画像を表示するプログラムをご紹介します。

     

    ①タグの生成

    タグの生成は「document.createElement(‘タグ名’)」で行います。

    生成した要素は、変数 image に入れておきます。

    const image = document.createElement('img');

     

     

    ②属性を追加する

    画像の表示には、src属性が必要です。

    src属性を追加するには、

    image.src = "test.png";

     

     

    このように、変数.属性 = “” とします。

     

    src属性以外にも、画像の代替テキスト「alt属性」なども追加できます。

    image.alt = "アイコン";

     

     

     

    ③タグの挿入

    作成した要素は、挿入することで、HTMLタグとして機能します。

    document.body.appendChild(image);

     

    変数image をHTMLのbodyタグに挿入します。

     

     

    サンプルコード

    サンプルコード全文です。

    // ①タグの生成
    const image = document.createElement('img');
    
    // ②属性の追加
    icon.src = "test.png";
    icon.alt = "アイコン"
    
    // ③タグの挿入
    document.body.appendChild(image);

     

     

    まとめ

    JavaScriptで画像を表示する方法をご紹介しました。

    プログラムの流れをまとめると、

    1. タグの生成
    2. 属性の追加
    3. タグの挿入

    となります。

    これは、imgタグだけでなく、他の要素の生成もできます。