【JavaScript】src属性を変更してimgタグの画像を変更する方法

JavaScriptでimgタグの画像を変更するには、imgタグのsrc属性を変更する方法があります。

今回は、jQueryなしの素のJavaScriptのみで、imgタグの画像を変更する方法についてご紹介します。

JavaScriptでimgタグの画像を変更する

サンプルコード

HTML

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

JavaScript

const target = document.querySelector('#targetImage');
const url = '変更後の画像のURL';
target.src = url;

①画像を変更したいimgタグを取得する

const target = document.querySelector('#targetImage');

まずは、画像を変更したいimgタグを取得します。

id属性ではなくclass属性で取得したり、getElementById()などで取得しても良いです。

②取得したimgタグのsrc属性を変更する

const url = '変更後の画像のURL';
target.src = url;

①で取得したimgタグのsrc属性を変更します。

PC表示・SP表示でimgタグの画像を変更する

JavaScriptでimgタグの画像を変更する②の処理を少し工夫することで、PC表示・SP表示でimgタグの画像を変更することができるようになります。

// メディアクエリを定義する（ここでは、768px以上がPC表示、768未満がSP表示とする）
const mediaQuery = matchMedia('(min-width: 768px)');

// メディアクエリを判定する関数を定義する
const mediaQueryFunc = (mq) => {
  if (mq.matches) {
    target.src = 'PC表示の画像URL';
  } else {
    target.src = 'SP表示の画像URL';
  }
}

// ページ読み込み時の処理
mediaQueryFunc(mediaQuery);
// ウィンドウリサイズ時の処理
mediaQuery.addListener(mediaQueryFunc);