文章は出ているのに、画像のところだけ枠や代替テキストになっている。学び始めで必ず一度は遭遇します。原因のほとんどは「ファイルの場所の伝え方」で、上から順に潰していけば必ず見つかります。

1. 検証ツールで404が出ていないか

まず検証ツールを開き、Network（ネットワーク）タブを見た状態でページを再読み込みしてください。画像のファイル名の行が赤く、404 と表示されていれば「そのパスにファイルが無い」という意味です。つまりファイル自体ではなく、指定した場所が間違っています。

逆に404が出ていないのに表示されない場合は、CSSで隠れている・サイズが0になっているなど、別の原因を疑います。

2. パスの書き方が合っているか

パスは「いまのファイルから見た、相手の場所」です。HTMLファイルを基準に考えます。

よくあるフォルダ構成
my-site/
├─ index.html
├─ images/
│   └─ cat.jpg
└─ pages/
    └─ about.html

<!-- index.html から書く場合 -->
<img src="images/cat.jpg" alt="猫" />

<!-- pages/about.html から書く場合（1つ上に戻る） -->
<img src="../images/cat.jpg" alt="猫" />
  • ../ … 1つ上のフォルダに戻る
  • ./ … いまと同じフォルダ（省略できる）
  • / で始める … サイトの一番上から数える。ローカルで開くとうまく動かないことがある

3. 拡張子とファイル名が本当に合っているか

見落としが多いのがここです。Windowsは初期状態で拡張子を隠しているため、cat.jpg のつもりが実際は cat.jpeg や cat.JPG だった、ということが起きます。エクスプローラーの表示設定で拡張子を表示するようにしておくと、この種の間違いが消えます。

  • jpg と jpeg の違い
  • 大文字小文字の違い（IMG_1234.JPG など、カメラから取り込んだ画像に多い）
  • 名前に全角文字やスペースが入っている（英数字とハイフンだけにするのが安全）

4. 手元では出るのに、公開したら出ない

これは大文字小文字が原因です。WindowsやMacは区別しませんが、公開先のサーバーの多くは区別します。手元で Cat.jpg と cat.jpg を同じものとして扱えていたものが、サーバーでは別物になり、404になります。

対策は単純で、画像のファイル名はすべて小文字に統一することです。最初からそう決めておけば、この問題には二度と遭遇しません。

5. 表示はされているが、見えていない

404が出ていない場合は、CSSを疑います。検証ツールで画像の要素を選び、次を確認してください。

  • width や height が 0 になっていないか
  • display: none が当たっていないか
  • 親要素の高さが0で、はみ出した部分が隠れていないか
CODEalt が出ている＝ファイルが見つかっていないコードを書き換えると、すぐ下で動きます

1つ目は存在しないファイルを指しています。src を data: で始まる2つ目の値に書き換えると表示されます。

alt の文字が見えている状態は、失敗ではなく「ブラウザが代わりに教えてくれている」状態です。alt をきちんと書いておくと、こういうときにも何の画像だったかが分かります。