我正在与百里香一起学习春季靴子。我已将用户对象的配置文件图像存储在文件系统中,并且只有图像的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指定背景图像?
答案 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;
}
当我想显示从搜索结果中收到的个人资料图片时,我偶然发现了该解决方案。