【JavaScript】 画像を動的に読み込んでhtml(DOM)やCanvasで使用する

HTML

<img id="image" src="url">

JavaScript

window.addEventListener('DOMContentLoaded',()=> {
   const img = document.getElementById("image");
   img.src = 新しいURL;
});

JavaScript

window.addEventListener('DOMContentLoaded',()=> {
   const img = new Image( );
   img.src = 新しいURL;
});

   const img = document.getElementById("image");
   // または
   // const img = new Image( );

   img.onload = function(){  }; // 読み込み完了時に呼び出される関数をセット
   img.onerror = function(){  }; // エラー時に呼び出される関数をセット

    img.src = 新しいURL;

複数のURLから動的に画像を読み込むJavaScript

function onloadImage  ( imageUrls , callBack  , errorCallBack )

コールバックの形式

    callBack( imageUrlsのインデックス番号 , DOMに追加可能なイメージオブジェクト )

コールバックの形式

    errorCallBack( imageUrlsのインデックス番号 )

HTML

<div id="contents"></div>

JavaScript

 window.addEventListener('DOMContentLoaded',()=> {

            const f = ( index , image ) => { // コールバック関数（成功時）
                document.getElementById("contents").appendChild(image);
            };

            const ef = ( index  ) => { // コールバック関数（失敗時）

                const img = new Image();
                dumyImage( imageoptions ).setImage( img );
                document.getElementById("contents").appendChild(img);
            };

            onloadImage(  ["URL1","URL2"] , f , ef );
});