web-dev-qa-db-ja.com

thymeleafを使用したCSSスタイル属性の設定

Thymeleaf解決済みURLを使用してスタイルタグの背景プロパティを設定する方法。

私が持っています

<div style="background:url('<url-to-image>')"></div>

ありますか <img th:src="${@/<path-to-image>}"> thymeleafのスタイル属性の設定に相当。

12
Mushtaq Jameel

th:styleを使用してスタイル属性を設定すると、これを実現できます。

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

Thymeleafフォーラムで this threadを確認してください。

38

@Leandro Carracedoが提案した答えは私にはうまくいきませんでしたが(途中で助けました)、変数の値を取得するためにブラケットと「$」の2番目のペアを追加する必要がありました

<td th:style="'font-size:'+@{${headerTemplateTextSize}}+'; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px;-webkit-margin-end: 0px; font-weight: 300; max-width: 100px'">
    <div>...</div>
</td>
4
Jaroslav

リテラル置換を使用することもできます。

<div th:style="|background:url(@{/<path-to-image>});|"></div>
0