画像が表示されないときの確認順｜URL・公開先・大文字小文字

自分のパソコンでは見えるのに公開すると消える画像。実際に参照しているURLから、ファイルと公開設定を照合する方法を解説します。

ページのURLと、画像のURLを分けて確認する

ページが開くのに画像だけ出ない場合は、まず画像がどのURLから読み込まれているかを確認します。CMSなら登録した画像と本文の指定を、開発担当者ならブラウザーの検証機能やHTMLのsrcを調べます。ページを更新したことだけで、画像ファイルも公開されたとは限りません。

手元のファイルを指すCドライブなどのパスや、管理画面だけで見られるプレビュー画像は、一般の訪問者から同じように読めません。読者がアクセスできる場所にファイルがあるかが最初の確認点です。

ここで「リンク先のURLを直接開く」という確認が役立ちます。画像そのものが取得できないのか、ページ側のサイズや配置で見えないのかを分けられるためです。

MDNのURL解決の資料では、相対URLは基準となるURLから解決されると説明されています。先頭にスラッシュがあるかどうかで、参照する場所が変わります。

ページの基準	指定	解決されるURL
https://example.com/articles/guide	images/photo.jpg	https://example.com/articles/images/photo.jpg
https://example.com/articles/guide	/images/photo.jpg	https://example.com/images/photo.jpg

これはHTMLに別のbase指定がない場合を想定した説明例です。画像を置いた場所と、ブラウザーが実際に要求しているURLを照合してください。サイトをサブディレクトリで公開する構成では、ルートから始めれば常に正解になるわけでもありません。

公開先によってファイル名の扱いは異なります。手元で表示できたことだけで本番も同じとは判断せず、公開後のURLで確認します。

CSSによって非表示になっていないか、幅や高さが意図せず小さくなっていないか、別の要素に隠れていないかを確認します。スマホだけ見えないなら、画面幅ごとの設定も対象です。HTTPSページにHTTPの素材が残る問題は、混在コンテンツとして別に調べます。

ページURL、画像URL、確認した端末、修正内容を記録します。画像を表示できたら、内容が正しいか、代替テキストが適切かも見直します。違う写真へ差し替わった状態を「表示できたので完了」にしないようにしてください。

SITE PORTの編集デモでは、写真の選択から公開後の表示確認までの流れを見ておくと役立ちます。画像を頻繁に差し替える予定なら、URLを手作業で直す場面があるか、どこまで画面上で完了するかも比較してください。

SITE PORTの完成例を見る・編集のデモを見る。自分で更新する場面を想像しながら、利用できる機能とサポート範囲を申込前に確認してください。

[画像の容量と代替テキスト](/articles/website-images-size-alt)・[更新が反映されない場合](/articles/website-update-not-visible)