【JavaScript】イメージ<img>の操作を解説｜Webの基礎

記事内には広告が含まれます

2026年8月20日

はじめに

前回の記事では、<a>タグ（リンク）をJavaScriptで操作する方法を解説しました。

今回は、Webページに欠かせないもう1つの要素、イメージ（<img>タグ）をJavaScriptで操作する方法を解説します。srcの書き換えによる画像切り替え、読み込みエラー時の代替表示、読み込み完了の検知、画像の実寸法の取得まで、実務でよく使う内容を中心に紹介します。

<img>タグの基本をおさらい

まずはHTMLの<img>タグの基本をおさらいします。

<img src="/images/sample.jpg" alt="サンプル画像" width="600" height="400" loading="lazy">

属性	内容
`src`	画像ファイルのパス
`alt`	画像が表示できない場合の代替テキスト（アクセシビリティ・SEOにも重要）
`width` / `height`	表示サイズ（縦横比の確保にも使われる）
`loading`	`lazy`を指定すると画面に近づくまで読み込みを遅延できる

画像要素を取得する

【JavaScript】documentオブジェクトを解説や前回の記事で紹介したquerySelectorAllを使うと、ページ内の画像をまとめて取得できます。

const images = document.querySelectorAll("img");

images.forEach((img) => {
    console.log(img.src, img.alt);
});

querySelectorAll("img")は該当するすべての<img>要素をNodeListとして返すため、forEachで1つずつ処理できます。

srcを書き換える（画像の切り替え）

サムネイルをクリックしたときにメイン画像を切り替える、といった処理はsrcプロパティへの代入で実現できます。

const thumbnails = document.querySelectorAll(".thumbnail");
const mainImage = document.getElementById("mainImage");

thumbnails.forEach((thumb) => {
    thumb.addEventListener("click", () => {
        mainImage.src = thumb.src;
    });
});

サムネイル画像がクリックされるたびに、その画像のsrcをメイン画像に反映しています。前回の記事で紹介したlink.hrefと同様に、img.srcもHTMLに書かれた値そのままではなく、常に完全なURL（絶対パス）に変換されて取得できます。

画像の読み込みエラーに対応する（onerror）

画像ファイルが存在しない・パスが間違っているなどで読み込みに失敗すると、errorイベントが発生します。これを利用すると、代替画像へ自動的に差し替えられます。

const img = document.querySelector("img");

img.addEventListener("error", () => {
    img.onerror = null; // 無限ループ防止
    img.src = "/images/no-image.jpg";
});

onerrorで差し替えた代替画像（no-image.jpgなど）自体の読み込みにも失敗すると、再びerrorイベントが発生し、無限ループでエラーが起き続けてしまいます。イベントリスナー内でimg.onerror = null;を設定し、代替画像のパスが確実に存在することを確認しておきましょう。

画像の読み込み完了を検知する（load・complete）

画像の読み込みが完了したタイミングで処理を行いたい場合はloadイベントを使います。ただし、ブラウザのキャッシュなどですでに読み込みが終わっている画像はloadイベントが発生しないことがあるため、completeプロパティと組み合わせて判定します。

const img = document.querySelector("img");

if (img.complete) {
    console.log("すでに読み込み完了");
} else {
    img.addEventListener("load", () => {
        console.log("画像の読み込みが完了しました");
    });
}

img.completeは画像の読み込みがすでに完了している（または画像自体が存在しない）場合にtrueを返すプロパティです。ページ表示直後にキャッシュ済みの画像を扱う場合など、loadイベントの登録が間に合わないケースの対策になります。

画像の実寸法を取得する（naturalWidth・naturalHeight）

width・heightプロパティはHTMLやCSSで指定した表示サイズを返しますが、画像ファイルそのものの元のサイズを知りたい場合はnaturalWidth・naturalHeightを使います。

img.addEventListener("load", () => {
    console.log(img.naturalWidth, img.naturalHeight); // 元画像のサイズ
    console.log(img.width, img.height); // 表示サイズ
});

naturalWidth・naturalHeightは画像が実際に読み込まれるまで取得できません（読み込み前は0が返ります）。前述のloadイベント内、またはcompleteプロパティで読み込み済みを確認してから取得しましょう。縦横比を保った拡大縮小の計算などに活用できます。

実務サンプル（サムネイルギャラリー＋読み込みエラー対応）

サムネイルクリックでメイン画像を切り替えつつ、読み込み中はローディング表示、失敗時は代替画像に差し替えるサンプルです。

HTML

<img id="mainImage" src="/images/photo1.jpg" alt="メイン画像" class="is-loading">

<div class="thumbnails">
    <img class="thumbnail" src="/images/photo1-thumb.jpg" alt="サムネイル1">
    <img class="thumbnail" src="/images/photo2-thumb.jpg" alt="サムネイル2">
    <img class="thumbnail" src="/images/photo3-thumb.jpg" alt="サムネイル3">
</div>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const mainImage = document.getElementById("mainImage");
    const thumbnails = document.querySelectorAll(".thumbnail");

    function loadMainImage(src) {
        mainImage.classList.add("is-loading");
        mainImage.src = src;
    }

    mainImage.addEventListener("load", () => {
        mainImage.classList.remove("is-loading"); // 読み込み完了でローディング表示を解除
    });

    mainImage.addEventListener("error", () => {
        mainImage.onerror = null; // 無限ループ防止
        mainImage.src = "/images/no-image.jpg";
        mainImage.classList.remove("is-loading");
    });

    thumbnails.forEach((thumb) => {
        thumb.addEventListener("click", () => {
            loadMainImage(thumb.src.replace("-thumb", "")); // サムネイルURLから本画像URLを生成
        });
    });
});

サムネイルがクリックされるとloadMainImageでメイン画像にis-loadingクラスを付けつつsrcを書き換え、読み込みが完了したらloadイベントで表示を戻します。万が一画像の読み込みに失敗した場合はerrorイベントで代替画像に差し替え、onerror = nullで無限ループを防いでいます。