タイトルの通りですが、ローカル環境で特に問題なく表示されていた画像が、テスト環境のサーバ上で表示されずに少し悩むということがあったので備忘録としてメモ。
うまくいかなかった例
以下のようにアイコン画像を読み込もうとして、ローカル環境では特に問題なかったのですが、サーバにアップするとうまく表示されませんでした。
<img src="icon_close.png">
サーバ上で表示されないデモページ
そもそも画像パスに直接アクセスしても表示されない状態だったのですが、その環境がサーバに接続してサーバ内を確認するということができなかったため、デプロイ部分で何かうまくいっていないのかと思い調査していました。
最終的に、画像ファイル名が「Icon_close.png」のように頭文字が大文字になっていることが原因でした。(デザインデータ上のレイヤー名を使っていて、このアイコンだけなぜか大文字になっていたので見落としていた)
ローカル環境では大文字小文字の区別なく表示されるようなのですが、サーバ上だと区別されてうまく表示されないようで、画像ファイル名を小文字に変更することで解決できました。
対応後のデモページ
コメントが承認されるまで時間がかかります。