なぜ手元では見えたのに公開後は画像が消えるのか
手元のパソコンでHTMLファイルをダブルクリックして開いたときは画像が表示されたのに、公開した途端に画像だけが崩れる。これは多くの人が経験するトラブルです。理由はシンプルで、ローカルで開いているときと公開後とでは、ブラウザが画像を探しに行く「基準の場所」が変わるからです。
ローカルでは多少パスがずれていても、たまたま同じフォルダにある画像を拾えてしまうことがあります。ところが公開後は指定したとおりの場所を厳密にたどるため、わずかな書き間違いでも「そこに画像がない」と判断され、リンク切れになります。
つまり問題は画像の中身ではなく、HTMLが画像を呼び出す住所表記にあるケースがほとんどです。まずはそこを疑うのが近道です。
いちばん多い原因は相対パスとファイル名のずれ
画像が表示されない原因は、いくつかの定番に絞られます。一つずつ確認していくと、たいていどれかに当てはまります。
特に見落としやすいのが、大文字と小文字の違いです。手元のパソコンでは「Photo.png」と「photo.png」を同じ扱いにする場合がありますが、公開環境では別物として区別されることが一般的です。HTMLの記述と実際のファイル名を、一字一句そろえる意識が必要です。
- 相対パスの階層がずれている（「images/」を付け忘れている、または余計に付けている）
- ファイル名の大文字・小文字がHTMLと実ファイルで食い違っている
- 拡張子が違う（「.jpg」と書いたのに実体は「.jpeg」や「.png」）
- ファイル名に全角文字やスペースが混ざっている
- 絶対パス（「C:\Users\...」のようなパソコン内の場所）を書いてしまっている
- 画像ファイル自体をアップロードに含め忘れている
症状別チェック表
公開後に画像だけ表示されないときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
自分で原因を切り分ける手順
やみくもに直すより、順番に切り分けると原因が早く特定できます。次の流れで確認してみてください。
- 表示されない画像を右クリックし、画像のURLやリンク先をコピーする
- コピーしたURLをブラウザのアドレス欄に貼り、画像単体で開けるか試す
- 開けなければパスの間違い、開ければHTML側の記述ミスと当たりを付ける
- HTMLの「img」タグの「src」と、実際のファイル名・置き場所を見比べる
- 大文字小文字・拡張子・フォルダ名を一字ずつ突き合わせる
- 修正後、ブラウザを再読み込み（できればキャッシュを消して）して再確認する
ZIPで一式をまとめて公開するとパスずれを防げる
相対パスのトラブルは、HTMLだけを単体でアップロードし、画像を別の場所に置いたときに起こりがちです。これを避けるには、HTML・CSS・JS・画像をフォルダ構成ごとZIPにまとめて公開するのが確実です。
フォルダの中身ごと一括で公開すれば、手元で動いていたときと同じ位置関係が保たれます。たとえば「index.html」と同じ階層に「images」フォルダがある状態をそのまま再現できるため、「images/logo.png」のような相対パスがそのまま通ります。
ギガサイト便はZIP（HTML/CSS/JS/画像一式）をそのまま受け取って共有URLとして公開できるので、ファイルを個別に置き直す手間がなく、パスずれの原因を一つ減らせます。
直したらURLそのままで差し替えて再確認
原因が分かって修正できたら、あとは公開ファイルを新しいものに置き換えるだけです。このとき気をつけたいのが、せっかく共有した相手に再びURLを送り直す手間です。
ギガサイト便なら同じURLのままファイルを差し替えられるため、修正版に入れ替えても共有相手へのリンク連絡は不要です。差し替え後にURLを開き直し、画像が正しく表示されるか自分の目で確かめましょう。
なお、アップロード時には静的公開に不要なファイルや外部依存などの兆候を検出して警告が出ることがあります。画像トラブルの調査中に気づかなかった点に気づけるので、表示確認とあわせて目を通しておくと安心です。
修正後に確認する順番
画像パスを直したあとは、いきなり全体を見るより、1枚ずつ原因を潰すほうが早いです。まず問題の画像だけを確認し、次に同じフォルダ内の画像、最後にページ全体を見ます。複数ページのZIPなら、別ページの画像参照も同じルールで確認します。
修正済みファイルを同じURLに差し替えたら、キャッシュの影響を避けるために別ブラウザやシークレットウィンドウでも確認します。レビュー相手には「同じURLで画像修正済み」と伝えると、古いリンクとの混同を避けられます。
- 問題の画像ファイル名とHTML内の参照パスを一致させる
- 同じフォルダ内の他画像も大文字小文字・拡張子を確認する
- ZIPを作り直したら、展開してindex.htmlから開いてみる
- 同じURLへ差し替え後、別ブラウザで画像が出るか確認する
よくある質問
手元では画像が見えるのに公開すると消えるのはなぜですか
ローカルで開いたときと公開後とで、ブラウザが画像を探す基準の場所が変わるためです。手元では多少パスがずれても近くの画像を拾えますが、公開後は指定どおり厳密にたどります。結果として、わずかな書き間違いでもリンク切れになります。
画像のリンク切れかどうかを見分ける簡単な方法はありますか
表示されない画像を右クリックして画像のURLをコピーし、それをアドレス欄に貼って単体で開いてみてください。画像だけでも開けないならパスやファイル名の間違い、開けるならHTML側の記述ミスが疑われます。原因の切り分けに役立ちます。
ファイル名の大文字と小文字は関係しますか
はい、公開環境では大文字と小文字を別物として区別するのが一般的です。HTMLで「Logo.png」と書いて実ファイルが「logo.png」だと表示されません。記述と実際のファイル名を一字一句そろえてください。
画像のずれを防ぐにはどう公開すればよいですか
HTML・CSS・画像をフォルダ構成ごとZIPにまとめて公開すると、手元と同じ位置関係が保たれます。個別にファイルを置き直す必要がなくなり、相対パスがそのまま通るため、パスずれの原因を減らせます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。
画像パスを直した後はどこまで再確認すべきですか？
直した画像だけでなく、同じフォルダ内の画像、別ページの画像、スマホ幅での表示まで軽く確認してください。同じURLへ差し替えた後は、別ブラウザやシークレットウィンドウで古い表示が残っていないか見ると安心です。