jQueryを使わずにJavaScriptだけでimgタグの画像を変更する

2022.03.03 2022.03.03

他の記事のサンプルなどで既に記載していましたが、imgタグのsrcを書き換えて別の画像を表示する方法です。
ここでは、jQueryを使わずに素のJavaScriptだけで実現する方法です。

JavaScriptでimgタグのsrcを書き換える方法

任意のimgタグを用意します。最初に何も表示したくない場合は属性src自体記述不要です。

<img id="imgView" src="元の画像のURL">

imgタグのsrcに新しい画像を設定します。
srcにはURLや相対パス、DataURLなどを指定できます。

const imgElement = document.getElementById('imgView');
imgElement.src = '新しい画像のURL';

画像ファイルをアップロードせずにimgタグに表示する

JavaScriptで文字列の空白を削除する方法