Question

我正在与百里香一起学习春季靴子。我已将用户对象的配置文件图像存储在文件系统中，并且只有图像的URL才是数据库中保留的用户对象的一部分。

我已将name和dpurl添加到模型中，以便从模板访问它。

@GetMapping("/profile")
public String profileController(@AuthenticationPrincipal User activeUser, Model model) {
            model.addAttribute("name", activeUser.getName());
            model.addAttribute("dpurl", activeUser.getDpURL());
            return "profile";
        }

我可以使用name从模板访问th:text="${name}"

但是，我无法像这样用百里香叶指定背景图像

<div id="dp-container" th:style="'background-image: url(' + @̣{dpurl} + ');'" >

这会导致错误
Could not parse as expression: "'background-image: url(' + @̣{dpurl} + ');'"

更新

像这样更改

<div id="dp-container"  th:style="'background-image:url(' + @{dpurl} + ');'">

现在我没有任何错误，但是背景图像仍然没有显示。

如何使用Thymeleaf指定背景图像？

Answer 1

它可能需要看起来像这样：

<div id="dp-container"  th:style="'background-image:url(' + ${dpurl} + ');'">

但这取决于dpurl包含的内容。您真的需要使用@{...}吗？然后，您应该使用@{${dpurl}}。

要调试此功能，您应该查看源代码。它也会显示您的表情也可以解决。

Answer 2

我可以使用它

<td  th:style="'background: url(/images/aws2.png)'" class="fluid hero-image" >

Answer 3

好吧，如果您遇到一些更复杂的事情，例如需要将变量传递到url中，则可以尝试以下操作：

<div id="profile_image" th:style="'background-image: url('+ @{'/view-profile-pic/' + ${result.profile_pic}} +');'"></div>

在CSS中，图像显示正确：

#profile_image {
margin: auto;
height: 200px;
width: 200px;
box-sizing: border-box;
border-radius: 100px;
background-size: cover; 
}

当我想显示从搜索结果中收到的个人资料图片时，我偶然发现了该解决方案。

如何用Thymeleaf指定背景图片？

3 个答案: