更新日: 2022 / 08 / 08

HTMLで画像が表示されない場合の原因と修正方法

カテゴリー: HTML&CSS 入門ガイド

画像があるはずの場所が「x」マークになっていて画像が正しく表示されない場合があります。

原因は大きく分けて画像URL(パス)の入力ミスとサーバーに画像が存在しない場合の2つです。

このページではHTMLコードが原因になっている場合の具体的な修正方法を解説します。

HTMLで画像を挿入する方法やカスタマイズ方法については以下の記事をご覧ください。

-> 初めてでもできる!HTMLで画像挿入とカスタマイズする方法

  1. HTMLで画像が表示されない状況とは?

    1. xマークが出ている
    2. 画面に何も表示されない
  2. HTMLで画像が表示されない原因

  3. 画像が表示されない場合の具体的な修正方法

    1. imgタグのパスが正しく入力されているかを確認する
    2. リンク先のサーバーに画像があるかを確認する
    3. HTMLタグの書き方に間違いがないか確認する
    4. CSSコードの書き方に間違いがないか確認する
  4. まとめ

HTMLで画像が表示されない状況とは?

HTMLで画像が表示されない症状としては次のような場合があります。

xマークが出ている

画面に「x」マーク(ChromeやFirefoxなどブラウザによって異なる)が表示される場合です。

HTMLで画像が表示されない状況とは? xマークが出ている

alt属性を指定している場合はテキストが一緒に表示されることがあります。

画面に何も表示されない

2つめは画面に何も表示されない場合です。

HTMLで画像が表示されない状況とは? 何も表示されない

HTMLコードとしては確かにそこにあるのに画面に表示されない場合があります。

HTMLで画像が表示されない原因

imgタグはちゃんと設置されているのにホームページで画像が表示されない原因としては次のようなことが考えられます。

  • 画像URLが間違っている
  • サーバー上に画像が存在しない
  • HTMLタグの書き方が間違ってる
  • CSSで非表示になるようなコードが書き込まれている

「x」マークが出る場合は1つめと2つめの可能性があります。imgタグのsrc属性に入力したURLが間違っている場合やサーバー上に画像がアップロードされていない場合は画像は表示されません。

画面に何も表示されない場合は、3つめか4つめの可能性があります。例えばsrc属性がscrになっていたりする場合は画面に何も表示されなくなります。

以下で具体的な解決方法を解説します。

画像が表示されない場合の具体的な修正方法

ここからは上記で挙げた原因について具体的な対策方法を解説します。

  • imgタグのパスが正しく入力されているかを確認する
  • リンク先のサーバーに画像があるかを確認する
  • HTMLの書き方に間違いがないか確認する
  • CSSコードの書き方に間違いがないか確認する

imgタグのパスが正しく入力されているかを確認する

まずはじめに確認したいのがimgタグのURLが正しく入力されているかです。

よくあるのが、拡張子を書き忘れていたり、png画像なのにjpgと書いていたりする場合があるのでURLの入力をチェックしてみてください。

// 拡張子がない
http://example.com/images/image-name
// 拡張子が間違ってる
http://example.com/images/image-name.jpg

また画像のアドレス自体が間違っていると正しく読み込めなくなるのでパスが正しいかどうかも確認してください。

リンク先のサーバーに画像があるかを確認する

imgタグのURLは間違ってないのに画像が表示されない場合はURLアドレスで指定した場所に画像があるかを確認してください。

サーバーに画像がアップロードされていなかったり、指定したアドレスと違うフォルダに入っていないかをチェックしてみてください。

HTMLタグの書き方に間違いがないか確認する

HTMLタグに書き間違いがある場合も画像が上手く表示されなくなります。

src属性の書き間違いがないか、閉じタグが正しく設置されているかなども確認してみてください。

<img scr="../abc.jpg" alt=""

CSSコードの書き方に間違いがないか確認する

さいごにCSSコードでdisplayプロパティやvisibilityプロパティなどで非表示設定になっていないかも確認してみてください。

画像のHTMLタグに対して直接CSSコードが当てられていなくても、階層構造の上位のdivタグなどに非表示のコードがある場合は修正が必要です。

確認するにはChromeなどのブラウザでデベロッパーツールを開き、「Styles」タブでコードに問題がないかをチェックできます。

画像が表示されない場合の具体的な修正方法 CSSコードの書き方に間違いがないか確認する

まとめ

ここまで書いてきたことをまとめると画像が表示されない原因は大きく分けて2つ。

  • imgタグの入力ミスがないかを確認
  • サーバー上に画像があるかを確認

HTMLで画像が表示されない原因は単純なミスの場合がほとんどなので、入力ミスや画像を正しくアップロードできているかを確認すればだいたいの問題は解決すると思います。