如何用Thymeleaf指定背景图片?

时间:2018-07-16 15:50:19

标签: spring spring-boot thymeleaf

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


我已将namedpurl添加到模型中,以便从模板访问它。

@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指定背景图像?

3 个答案:

答案 0 :(得分:3)

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

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

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

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

答案 1 :(得分:0)

我可以使用它

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

答案 2 :(得分:0)

好吧,如果您遇到一些更复杂的事情,例如需要将变量传递到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; 
}

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