在 thymeleaf 中使用动态 url 设置背景图像答案

【问题标题】：Set background image in thymleaf with dynamic url在 thymeleaf 中使用动态 url 设置背景图像
【发布时间】：2020-09-20 14:24:09
【问题描述】：

我想在 thymleaf 中显示一个背景图片，其 url 来自后端 spring boot

<div class="card-img-top" th:style="background-image:url(/assets/img/banner-anout.jpg)" > </div>

这是元素我想用一个变量来填充它

<div class="card-img-top" th:style="background-image:url(${product.image})" > </div>

我尝试了以下几种方法

<div class="card-img-top" th:style="background: url{[[@{${product.image}]]}" > </div>

但它不起作用。有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

您可以通过将文字部分与 Thymeleaf 表达式连接来构建所需的字符串：

<div class="card-img-top" 
     th:style="'background-image:url(' + ${product.image}+ ')'" >
</div>

【讨论】：