GitHub Pagesでホームページを作成して公開したら、一部の画像が表示されない
GitHub Pagesでホームページを公開したところ、一部のバナー画像だけが表示されていないことに気付きました。Visual Studio Codeの拡張機能である「Live Server」では正しく表示されていたため、原因の切り分けに少し時間を使うことになりました。
同じディレクトリ構成でローカルでは問題なく表示されているのに、GitHub Pagesでは読み込めない。この差はどこから生じているのかを確認していきました。
相対パスと絶対パスを疑う
最初に考えたのはパスの設定でした。相対パスが正しく記述できていない可能性があると判断し、GitHubにアップロードされた後の絶対パスへ変更するなどの検証を行いました。しかし結果は変わらず、画像は表示されませんでした。
また、相対パス指定でも読み込めている画像があったため、パスの誤りは原因ではないと判断しました。
大文字と小文字の違いが原因だった
次に確認したのはファイル名の表記でした。問題の画像ファイル名は「no.png」ですが、HTMLでは「No.png」と記述していました。
ローカル環境（Windows）では大文字と小文字が区別されないため、そのままでも画像は読み込まれていました。しかしGitHub Pagesの環境では大文字と小文字が区別されるようで、「No.png」という記述では一致せず読み込まれていなかったことが判明しました。
HTML側の記述を実際のファイル名に合わせて「no.png」に変更したところ、問題なく表示されました。
後で参考になった記事
今回の件を調べているうちに、以下の記事を見つけました。同じ問題で悩んでいる方に非常に参考になる内容です。
【GitHub】ローカルでは表示される画像が，GitHub Pagesで正しく表示されないときの解決方法（T_4c3さん）
まとめ
GitHub Pagesでのみ画像が表示されない場合、以下を確認すると解決につながる可能性が高いです。
- 画像パスの記述が正しいか
- ファイル名の大文字と小文字が完全に一致しているか
特にWindows環境で作業している場合、大文字・小文字の違いに気付きにくいため注意が必要です。同様の問題で悩んでいる方の参考になれば幸いです。