画像が表示されないときの原因と直し方

<img>を書いたのに画像が出ないとき、原因のほとんどはパスのまちがいです。ブラウザが画像ファイルを見つけられず、壊れた画像のアイコンや、altに書いた文字だけが表示されます。

まずは開発者ツールで本当にパスが原因かを確かめ、そのあと下のチェックリストを上から順に見ていきます。

ファイルの場所とsrcの値を入れるだけで原因を当てる画像パスのチェッカーも用意しています。チェックリストを読む前に試すと早いです。

まず404かどうかを確かめる

開発者ツール（右クリック→検証）のConsoleを開き、ページを再読み込みします。

GET http://127.0.0.1:5500/img/photo.jpg 404 (Not Found)

404 (Not Found)が出ていたら、ブラウザが探しに行った場所に画像がないという意味です。表示されているURLが、ブラウザが実際に探した場所です。自分が思っている場所とどこがちがうかを見比べると、まちがいがすぐ分かります。

よくある原因チェックリスト

1. HTMLから見た道順になっていない

srcには、HTMLファイルがある場所から見た画像の場所を書きます。

my-site/
├── index.html
└── images/
    └── photo.jpg

<!-- ○ index.html から見て images フォルダの中 -->
<img src="images/photo.jpg" alt="…">

<!-- ✕ フォルダ名が抜けている -->
<img src="photo.jpg" alt="…">

HTMLファイルがフォルダの中にあるときは、../で1つ上に戻る必要があります。

2. 大文字・小文字がちがう

Photo.JPGとphoto.jpgは、公開先のサーバーでは別のファイルとして扱われます。MacやWindowsでは同じものとして扱われることが多いので、自分のパソコンでは見えるのに、公開すると見えないという形で発覚します。

ファイル名はすべて小文字にそろえておくと、このまちがいが起きません。

3. 拡張子がちがう

.jpgと.jpeg、.pngと.PNGは別物です。特に注意したいのは、パソコンが拡張子を隠している場合です。photoに見えているファイルの本当の名前がphoto.jpg.pngになっていることもあります。

• Mac：Finderの設定→詳細→「すべてのファイル名拡張子を表示」をオン
• Windows：エクスプローラーの「表示」→「ファイル名拡張子」にチェック

VSCodeのファイル一覧では、拡張子は常に表示されています。

4. フォルダ名・ファイル名に日本語や空白がある

写真 1.jpgのような名前は、環境によって読みこめなかったり、URLが崩れたりします。ファイル名とフォルダ名は半角英数字とハイフン（-）だけにしておくのが安全です。

5. 画像を置く場所をまちがえている

srcのパスは正しいのに、画像ファイルそのものを別のフォルダに保存していたというパターンです。デスクトップやダウンロードフォルダに置いたままになっていないか、VSCodeのファイル一覧で確かめます。

6. パソコンの中の住所を書いている

<!-- ✕ 自分のパソコンでしか見えない -->
<img src="C:\Users\me\Desktop\photo.jpg" alt="…">
<img src="file:///Users/me/Desktop/photo.jpg" alt="…">

自分のパソコンの住所を書くと、公開したときにほかの人のパソコンでは見えません。必ずHTMLファイルから見た道順（相対パス）で書きます。

7. CSSの背景画像だけが出ない

background-image: url()のパスは、HTMLからではなくCSSファイルから見た道順です。

my-site/
├── index.html
├── css/
│   └── style.css
└── images/
    └── bg.jpg

/* style.css は css フォルダの中にあるので、1つ上に戻る */
.hero {
  background-image: url("../images/bg.jpg");
}

HTMLで動いたimages/bg.jpgをそのままコピーすると、css/images/bg.jpgを探しに行って404になります。

パスは合っているのに見えないとき

Consoleに404が出ていないなら、画像は読みこめています。表示のされ方を疑います。

• 大きさが0になっている：CSSでwidth: 0やheight: 0になっていないか。背景画像の場合、要素に高さがないと何も見えません（heightかpaddingを付けます）
• ほかの要素の下に隠れている：開発者ツールのElementsで<img>を選ぶと、ページ上のどこにあるかが青く光ります
• 公開したのに古い表示のまま：ブラウザのキャッシュです。⌘ + ⇧ + R / Ctrl + Shift + Rで再読み込みします

まとめ

1. まずConsoleで404が出ているかを見る。出ていたらパスのまちがい
2. パスはHTMLから見た道順。CSSのurl()だけはCSSから見た道順
3. 公開したら見えないときは大文字・小文字を疑う。ファイル名は小文字の半角英数字にそろえる
4. 拡張子が隠れていないか、パソコンの中の住所を書いていないかも確認
5. 404がないなら、大きさ0・高さのない要素・キャッシュを疑う

画像が出ない原因は、ほとんどが「ブラウザに場所が正しく伝わっていない」ことです。Consoleに出るURLを読めば、どこで道をまちがえたかが分かります。