imgタグで画像がなかった場合に指定した画像を表示する

imgタグでsrc属性で指定したURLやパスに画像が存在しない場合、デフォルトでは画像がない旨のアイコンが表示されます。
多くの場合、この動作で問題ありませんが、画像が見つからない場合に、指定したアイコンを表示したい場合があります。この記事では、imgタグで画像が存在しない場合に指定した画像を表示するコードを紹介します。

デフォルトの動作

以下のHTMLを作成します。"img/tori1.png" "img/tori3.png" は画像が存在しますが、"img/tori2.png" は画像が存在しません。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>画像がない場合の表示</h2>

  <img src="img/tori1.png"/>
  <img src="img/tori2.png" />
  <img src="img/tori3.png" /><br />

</body>
</html>

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
"img/tori2.png"のimgタグ部分は画像がないため、画像がない表示のアイコンが表示されます。
imgタグで画像がなかった場合に指定した画像を表示する:画像1

書式

画像がない場合に指定した画像を表示する場合は以下の書式を利用します。

<img src="(画像のURLやパス)" onerror="this.src='(画像のURL または 画像のパス)'">

または

<img src="(画像のURLやパス)" onerror="this.src='(画像のURL または 画像のパス)';this.style='(スタイル要素)'">

onerror属性にthis.style.display='none' を設定します。

実装例1

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>画像がない場合のアイコンを変更する</h2>

  <img src="img/tori1.png" onerror="this.src='img/not-found-icon.png'" />
  <img src="img/tori2.png" onerror="this.src='img/not-found-icon.png'" />
  <img src="img/tori3.png" onerror="this.src='img/not-found-icon.png'" /><br />

</body>
</html>

解説

onerror="this.src='img/not-found-icon.png'" を記述することで、src属性に指定した画像が存在しない場合、img/not-found-icon.png ファイルの画像を表示する動作になります。

動作確認

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。 2つ目のimgタグの画像部分が画像が見つからないため、指定したアイコンが表示されていることが確認できます。

imgタグで画像がなかった場合に指定した画像を表示する:画像2

実装例2:画像が大きい場合

以下のコードのHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>画像がない場合のアイコンを変更する</h2>
  <img src="img/tori1.png" onerror="this.src='img/not-found-icon.svg'" />
  <img src="img/tori2.png" onerror="this.src = 'img/not-found-icon.svg'" />
  <img src="img/tori3.png" onerror="this.src='img/not-found-icon.svg'" /><br />
</body>
</html>

上記のHTMLファイルを表示すると下図のページが表示されます。SVG画像のため、想定していたサイズより大きく表示されてしまいます。
imgタグで画像がなかった場合に指定した画像を表示する:画像3

コード

高解像度の画像やSVG画像を利用する場合は、styleで横幅を指定します。
以下のコードに変更します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>画像がない場合のアイコンを変更する</h2>
  <img src="img/tori1.png" onerror="this.src='img/not-found-icon.svg';this.style='width:4rem;'" />
  <img src="img/tori2.png" onerror="this.src = 'img/not-found-icon.svg';this.style='width:4rem;'" />
  <img src="img/tori3.png" onerror="this.src='img/not-found-icon.svg';this.style='width:4rem;'" /><br />
</body>
</html>

実行結果

上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。アイコン画像の大きさを小さくできました。
imgタグで画像がなかった場合に指定した画像を表示する:画像4

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。最近は生成AIの画像生成の沼に沈んでいる。

作成日: 2023-12-24

目次