HTMLの画像が表示されない時の対処

画像が表示されない原因のほとんどは、パスの間違い・ファイル名や拡張子の不一致・ファイルの置き場所のずれです。上から順にチェックすれば、ほぼ確実に特定できます。

画像が表示されない主な原因

最も多い原因はsrc属性に書いたパスの間違いで、次いでファイル名の大文字小文字、拡張子の不一致と続きます。

原因と確認方法の対応は以下の通りです。

以降で、発生頻度の高い順に対処法を解説します。F12キーで開く開発者ツールにも読み込みエラーが表示されるため、あわせて確認すると特定が早くなります。

原因1: パス・ファイル名の間違い

src属性に書いたパスが、実際のファイルの場所・名前と1文字でも違うと画像は表示されません。パスとは、HTMLファイルから見た画像ファイルの場所を示す道順のことです。

次のようなフォルダ構成を例にします。

index.html
images/
  photo.jpg

この構成での正しい書き方は、次の通りです。

<img src="images/photo.jpg" alt="商品の写真">

Webサーバーの多くは大文字と小文字を別のファイルとして区別するため、ローカルでは表示されてもサーバー上では表示されないことがあります。photo.jpgとPhoto.JPGは別物です。

.jpgと.jpeg、.pngの取り違えも定番の原因です。エクスプローラーやFinderで実際の拡張子を表示して、srcの記述と一致しているか確認してください。

原因2: ローカル・階層のずれ

HTMLファイルと画像ファイルの相対位置が想定とずれていると、パスの書き方自体が正しくても表示されません。

画像がHTMLより1つ上のフォルダにある場合は、src="../photo.jpg"のように「../」を付けて上の階層を指定します。「../」の数が足りない・多すぎるのもよくあるずれ方です。

「file:///C:/Users/…」のようなローカルの絶対パスをコピーして書くのも要注意です。自分のPCでは表示できても、サーバーにアップロードすると誰の環境でも表示されなくなるため、必ず相対パスで指定します。

サーバー公開後に表示されない場合は、FTPソフトやサーバーのファイルマネージャで、画像ファイルが実際にアップロードされているかを確認します。ファイルがある場合も、大文字小文字を含めてsrcのパスと完全に一致しているかを見直してください。

逆にローカルでだけ表示されない場合は、画像をまだダウンロードしていない、別のフォルダに保存しているといった可能性を確認します。

画像が表示されないマーク(壊れアイコン)の意味

壊れた画像のアイコンは、ブラウザが指定されたURLから画像を取得できなかったという合図です。imgタグ自体は認識されているため、疑うべきはsrc属性の中身です。

alt属性を設定していると、アイコンとあわせて代替テキストが表示されます。アイコンが出ている時点で、パス・ファイル名・置き場所のいずれかに原因があると絞り込めます。

開発者ツール(F12)のネットワークタブを開いてページを再読み込みすると、404と表示された行が読み込みに失敗した画像です。そこに出る実際のリクエストURLと、ファイルの本当の場所を見比べれば原因を特定できます。