HTMLに画像を書き込んだのに、ブラウザで開くと画像が出てこない。
代わりに、割れたアイコンやaltのテキストだけが表示されている。
ファイルはちゃんとそこに置いてあるのに、なんで出てけえへんの？
画像が表示されない理由は、ほぼすべてが「ブラウザが画像を見つけられていない」か「見つけたが見せていない」かのどちらかです。
そしてこの2つは、検証ツールを開けば数十秒で見分けられます。
この記事では、切り分けの手順と7つの原因別の対処法を、初心者の方向けに順を追って解説します。
こんな人に向けた記事です
「画像だけが表示されず、原因の見当もつかない」
「自分のパソコンでは出るのに、サーバーに上げると消える」
「相対パスの書き方に自信がない」
まず最初にやる3つの切り分け
原因を探す前に、問題がどちら側にあるかを確定させます。
1. 検証ツールで画像が読み込めているか見る
画像が出るはずの場所で右クリックし、「検証」（Chromeの場合）を選びます。
次に「Network」タブを開いてページを再読み込みし、画像ファイルの行を探してください。
| Networkタブの表示 | 意味 | 疑うところ |
|---|---|---|
| 404 と表示される | その場所にファイルがない | 原因①〜③ |
| そもそも行が出てこない | ブラウザが読みに行っていない | 原因④ |
| 200 で読み込めている | 取得はできている | 原因⑤〜⑥ |
| 403 と表示される | アクセスを拒否されている | 原因⑦ |
この1ステップだけで、探す範囲が半分以下になります。
2. 画像のURLを直接ブラウザで開く
Networkタブで画像の行をクリックすると、実際に読みに行っているURLが分かります。
そのURLをコピーして、新しいタブに貼り付けて開いてみてください。
画像が単体で表示されるなら、ファイルもパスも正しいということです。この場合はCSSやHTMLの問題に絞られます。
ここでエラーになるなら、そもそもその場所に画像がありません。
3. 別のブラウザやシークレットウィンドウで開く
キャッシュや拡張機能の影響を切り分けます。
広告ブロック系の拡張機能が、adやbannerを含むファイル名の画像を隠してしまうことがあります。
シークレットウィンドウで表示されるなら、コードは正しく、拡張機能側の問題です。
原因①：パスが間違っている
404が出ているときの、圧倒的多数がこれです。
ポイントは、パスは「画像の場所」ではなく「HTMLファイルから見た道順」で書くという点です。
project/
├── index.html … このファイルから見たパスを書く
├── images/
│ └── logo.png
└── about/
└── index.html … こちらは階層が1つ深い
【index.html から logo.png を指定する場合】
images/logo.png
【about/index.html から logo.png を指定する場合】
../images/logo.png../は「1つ上の階層へ戻る」という意味です。
階層が2つ深ければ../../と重ねます。
同じimages/logo.pngという画像でも、書いているHTMLの位置によって正解が変わります。
ページを複製して別の階層に置いたときに画像だけ消えるのは、これが原因です。
迷ったらルート相対パスにする
/images/logo.pngのように先頭を/で始めると、サイトの一番上から数えたパスになります。
この書き方なら、HTMLがどの階層にあっても同じ指定で通ります。
ただし、パソコン上でHTMLファイルを直接開いた場合には効きません。
ローカルでは表示されないのにサーバー上では表示される、という現象が起きたらこれを疑ってください。
原因②：ファイル名の綴りや大文字小文字が違う
パスの階層は合っているのに404になる場合は、ファイル名そのものを疑います。
- 綴りの打ち間違い（
logo.pngとrogo.png） - 大文字と小文字の違い（
Logo.pngとlogo.png） - 拡張子の違い（
.jpgと.jpeg、.JPG） - 末尾に余計な空白が入っている
とくに厄介なのが大文字・小文字です。
WindowsやMacは区別しないことが多いのに対し、多くのレンタルサーバーは区別します。
そのため「自分のパソコンでは出るのに、アップロードすると消える」という形で表面化します。
ローカルで動いてたのに本番で消えるやつ、これやったんか…！
予防策として、ファイル名はすべて半角小文字・ハイフン区切りで統一しておくのが確実です。
日本語ファイル名も、環境によって文字化けや読み込み失敗の原因になるため避けてください。
原因③：画像がアップロードされていない
コードは完璧でも、サーバー上にファイルがなければ表示されません。
FTPソフトやサーバーのファイルマネージャーで、実際にその階層にファイルがあるかを目で確認してください。
よくあるのは次のパターンです。
- HTMLだけ更新して、画像フォルダを上げ忘れている
- アップロードが途中で失敗している
- 1つ上や1つ下の階層に上がってしまっている
- 画像フォルダごと別名になっている（
imageとimages）
imageとimagesの取り違えは、気づくまでに時間を溶かしやすいミスです。
原因④：imgタグの書き方が間違っている
Networkタブに画像の行がまったく出てこない場合は、こちらです。
ブラウザが読み込みに行っていない、つまりタグとして成立していない状態です。
<!-- 正しい書き方 -->
<img src="images/logo.png" alt="ロゴ">
<!-- src の綴り間違い（表示されない） -->
<img scr="images/logo.png" alt="ロゴ">
<!-- クォートを閉じ忘れている -->
<img src="images/logo.png alt="ロゴ">srcをscrと打ち間違えるのは、経験者でもやるミスです。
また、クォートの閉じ忘れはそこから後ろのHTMLがまとめて壊れるため、画像だけでなくレイアウト全体が崩れることもあります。
日本語入力のまま書いて全角のクォートや空白が混ざっているケースも同様です。
imgタグの正しい書き方と属性については、こちらで詳しく解説しています。
原因⑤：CSSで見えなくなっている
Networkタブで200が返っているなら、画像の取得自体は成功しています。
それでも見えないなら、CSSが画像を隠している可能性が高くなります。
/* 画像そのものを消してしまっているパターン */
.card img {
display: none;
}
/* 高さが 0 になって見えないパターン */
.card {
height: 0;
overflow: hidden;
}
/* 背景画像のパスは「CSSファイルから見た位置」で書く */
.hero {
background-image: url("../images/hero.jpg");
}親要素の高さが0になっていたり、overflow: hiddenで切り取られていたりするケースは、画像そのものを見ても気づけません。
検証ツールで画像の要素を選び、親要素のサイズまで含めて確認するのが早道です。
背景画像はCSSファイルからの位置で書く
background-imageで指定するパスは、HTMLファイルではなくCSSファイルから見た道順になります。
ここはHTMLのimgと基準が違うため、混乱しやすいポイントです。
css/style.cssからimages/hero.jpgを指定するなら、../images/hero.jpgとなります。
そもそもCSS自体が効いていない可能性もあるので、その場合はこちらもあわせて確認してください。
原因⑥：画像ファイル自体に問題がある
読み込めているのに表示されない場合、ファイルそのものが壊れているか、形式が対応していない可能性があります。
拡張子だけを書き換えていないか
もっとも多いのがこれです。
photo.webpというファイルの名前をphoto.jpgに変えても、中身はwebpのままです。
形式を変えたいときは、必ず変換ツールやソフトを使って変換してください。
スマホで撮った写真をそのまま使っていないか
iPhoneで撮影した写真は、設定によってHEIC形式で保存されます。
この形式はWebサイト用の画像としては一般的ではないため、JPEGなどに変換してから使うのが無難です。
また、アップロードが途中で止まってファイルが壊れていることもあります。
パソコン上でその画像を開いて、正常に見られるかを確認してみてください。
原因⑦：外部サイトの画像を読み込んでいる
他のサイトにある画像のURLを、そのままsrcに指定しているケースです。
多くのサイトは、外部からの直接読み込み（ホットリンク）を禁止しています。
この場合、403エラーになったり、画像の代わりに警告画像が表示されたりします。
そもそも他人のサーバーに負荷をかける行為であり、著作権上の問題にもなり得ます。
使用が許可されている画像であっても、自分のサーバーにダウンロードして設置するのが正しい進め方です。
httpとhttpsが混ざっていないか
SSL化されたサイト（https）の中で、http://から始まる画像を読み込むと、ブラウザがブロックすることがあります。
混在コンテンツと呼ばれる状態です。
この場合、コンソールに警告が出るので、検証ツールの「Console」タブも見てみてください。
WordPressで画像が表示されない場合
WordPressの場合は、上記に加えて次の点も確認します。
- そもそもメディアへのアップロードに失敗している
- SSL化やドメイン変更のあと、記事内のURLが古いままになっている
- キャッシュ系プラグインが古い状態を配信している
- 画像最適化系プラグインの処理でファイルが壊れた
とくにSSL化のあとは、記事内に残ったhttp://のURLが原因で画像だけ消えることがよくあります。
アップロード自体ができない場合の対処は、こちらにまとめています。
それでも直らないときに見るところ
遅延読み込み（Lazy Load）がうまく動いていない
最近のサイトでは、画面に入ってから画像を読み込む遅延読み込みが標準的に使われています。
この仕組みがうまく動かないと、スクロールしても画像が出てこないという症状になります。
JavaScriptで制御するタイプの遅延読み込みは、他のスクリプトのエラーで止まると画像も表示されなくなります。
検証ツールのConsoleタブにエラーが出ていないか確認してみてください。
WordPressなら、遅延読み込み系のプラグインを一時的に停止して切り分けるのが早いです。
ファイルの権限（パーミッション）が正しくない
サーバー上にファイルは存在するのに403が返る場合、権限設定が原因のことがあります。
FTPソフトからパーミッションを確認し、画像ファイルが読み取り可能になっているかを見てください。
適切な値はサーバーによって異なるため、契約中のサーバーのマニュアルに従うのが確実です。
キャッシュやCDNが古い状態を配信している
画像を差し替えたのに古いものが出る、あるいは削除した画像がまだ見えるという場合はこれです。
ブラウザのスーパーリロード（WindowsはCtrl + Shift + R、MacはCommand + Shift + R）を試し、それでも変わらなければサーバーやCDN側のキャッシュ削除を行ってください。
まとめ
画像が表示されないときは、検証ツールのNetworkタブを開くところから始めてください。
404ならパス・ファイル名・アップロード漏れの3つ。
行そのものが出てこないならタグの書き間違い。
200なのに見えないならCSSかファイル形式。403ならホットリンクの制限。
この対応表さえ頭に入れておけば、やみくもにコードを書き直す時間がなくなります。
同じ考え方でCSSやJavaScriptのトラブルも切り分けられるので、あわせてどうぞ。
まずNetworkタブ見る。これ覚えとくだけで全然ちゃうな。
