web-dev-qa-db-ja.com

thymeleafのcssファイルのバックグラウンドURLを設定するにはどうすればよいですか？

CSSファイルがインポートされていないthymeleafテンプレートがあり、相対画像URLを使用してbackground-image: url{/image.jpg}プロパティを使用してbody要素のスタイル属性を宣言したいと考えています。アプリケーションコンテキスト名（/myapp/）を含めずにURLをロードしたかったのです。それは私にとってはうまくいかないことを除いて、 ここ の問題に似ています。

CSS：

<style>
body {
    background: url(../img/Background.jpg)
                no-repeat center center fixed;
    background-size: cover;
}
</style>

しかし、上記のCSSは機能せず、次の画像にアクセスしました。

http://localhost/img/Background.jpg.

そのため、画像を正しく読み込むには、値をurl(/myapp/img/Background.jpg)として指定する必要がありました。

mvc:resourcesリクエストが正しく読み込まれるようにspring-context.xmlで/img/構成を適切に設定しましたが、他の場所でも機能します。

spring-context.xml

<mvc:resources mapping="img/**" location="/WEB-INF/img/" />

では、thymeleafの相対URLを使用して背景URL画像のCSS値を動的にロードする方法は？

cssbackground-imagethymeleafrelative-path
6
Lucky

したがって、thymeleafのインラインテキスト値を使用して、cssの背景画像のurlプロパティに動的な相対パスを設定する方法は次のとおりです。

<style th:inline="text">
    body{
        background: url{[[@{/img/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>

これは相対パスを使用して画像をロードし、URLで「myapp」コンテキスト名を指定する必要はありません。

6
Lucky

別の方法は次のとおりです。

<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>

それがすべてですか????

1
Wilmer Villca