contextPathを設定するとcssからurl(～)で参照している画像が表示されなくなる

Question

前提・実現したいこと

contextPathを設定するとcssからurl(～)で参照している画像が表示されなくなってしまいます

発生している問題・エラーメッセージ

resourcesフォルダ以下は以下のような構成になっております

また、application.propertiesには以下の設定が存在しています

server.contextPath=/test

cssには以下のような記述があります

header{
    background-image: url("/img/common/tennsyu.png");
}

この状態で、http://localhost:8088/test/topPageを表示すると、画像ファイルが404エラーで表示されない状態になってしまいます

試したこと

一応http://localhost:8088/test/img/common/tennsyu.pngにアクセスすると画像が表示されるため、cssを以下のように書き換えるとhttp://localhost:8088/test/topPageでも画像は表示されました

header{
    background-image: url("../../img/common/tennsyu.png");
}

ただ、cssのパスは出来れば変更したくないです。
なにか方法はないでしょうか

試したこと追記

url内のパスの先頭のスラッシュを消すと、エラーメッセージは以下のようになりました

header{
    background-image: url("img/common/tennsyu.png");
}

login_index:1 GET http://localhost:8088/test/css/common/img/common/tennsyu.png 404 (Not Found)

Answer 1

問題がふたつありまして、

server.contextPath=/test は Thymeleaf内のコンテキストパス設定だけ反映されてControllerへのリクエストURLには含まれません。
server.servlet.context-path=/test も追加することで、Controllerへのコンテキストパスも反映されます。

他にもCSSからのコンテンツ指定ですが、/img/common/tennsyu.png とすると、コンテキストパスが /img に固定されてしまうため、サーバの設定でコンテキストパスを指定してるにも関わらずCSS内では別のコンテキストパスを指定していることになり、これは残念ながら正しくありません。

読み込まれた http://127.0.0.1:8080/test/css/style.css から見た相対パスの起点は、 http://127.0.0.1:8080/test/css/ ですから、もし 画像ファイルを static/image に置いているのであれば、 cssのimg指定は ../image/ファイル名 としなければなりません。

Comments

[koronatail]

A-pZさん回答ありがとうございました。今の今までcssのimgの指定方法を勘違いしていました・・・。cssを修正して解決しました。