imgタグで画像がなかった場合に何も表示しない - HTML
imgタグのsrcで指定したURLやパスに画像が存在しない場合に何も表示しないコードを紹介します。
概要
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 src="(画像のURLやパス)" onerror="this.style.display='none'">
onerror属性に
this.style.display='none' を設定します。
実装例
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>画像がない場合になにも表示しない</h2>
<img src="img/tori1.png" onerror="this.style.display='none'"/>
<img src="img/tori2.png" onerror="this.style.display='none'"/>
<img src="img/tori3.png" onerror="this.style.display='none'"/><br />
</body>
</html>
解説
onerror="this.style.display='none'" を記述することで、src属性に指定した画像が存在しない場合、画面に何も表示しない動作になります。
動作確認
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。2つ目のimgタグの画像部分が何も表示されていない動作になることが確認できます。
画像がない場合に何も表示しないが、枠の大きさを保持する
先のコードでは画像がない場合に何も表示せずに詰めて表示しましたが、何も表示しないが、画像の領域はそのままにしたい場合があります。
画像がない場合に枠の大きさを保持するコードを紹介します。
方針
枠の大きさを保持する場合は、imgタグの要素をinline-blockに変更し、幅を指定し、visibilityプロパティをhiddenに設定して非表示にします。
visibilityプロパティの動作については
こちらの記事を参照してください。
書式
<img src="(画像のURLやパス)" onerror="this.style.display='inline-block';this.style.width='(領域の幅)'; this.style.visibility='hidden'">
onerror属性に
this.style.display='inline-block';this.style.width='(領域の幅)'; this.style.visibility='hidden' を設定します。
実装例
コード
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>画像がない場合になにも表示しない</h2>
<img src="img/tori1.png" onerror="this.style.display='inline-block';this.style.width='180px'; this.style.visibility='hidden'"/>
<img src="img/tori2.png" onerror="this.style.display='inline-block';this.style.width='180px'; this.style.visibility='hidden'"/>
<img src="img/tori3.png" onerror="this.style.display='inline-block';this.style.width='180px'; this.style.visibility='hidden'"/><br />
</body>
</html>
解説
onerror="this.style.display='inline-block';this.style.width='180px'; this.style.visibility='hidden'" の記述により画像がない場合は、inline-block要素になり、
visibility:hidden設定で領域の大きさを残しながら非表示になります。
this.style.width='180px'; の幅の設定はもともと表示する画像あるいは枠の横幅を設定しておきます。
実行結果
上記のHTMLページをWebブラウザで表示します。画像がある場合の表示結果です。
画像が存在しない場合の表示結果です。画像が無い領域の大きさはそのまま残り、詰めた表示にならないです。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
