如何在Spring Boot Thymleaf模板的内联background-image css标签中添加静态图像？

Question

我正在使用java spring和Thyme leaf模板引擎来开发用于学习目的的Web应用程序。

在我的Thymeleaf页面之一中，我想使用内联CSS将图像添加为背景图像。我的图片在静态文件夹中， 我试图使用互联网上发现的各种方法，但是它们都不起作用。 我进行了搜索，很遗憾未能找到解决此问题的方法。

我尝试th:style tag并在Google中搜索以找出此标签的工作原理，但不幸的是无法正确理解此标签。

我已经添加了代码和错误的屏幕截图。

blockquote class="imgur-embed-pub" lang="en" data-id="a/TOr6Nyn"><a > 
href="//imgur.com/TOr6Nyn"></a></blockquote><script async   
src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

th:style="'background-image: url('+ 
@{~/frontend/images/blog/default/thum1.jpg}+')'"

Answer 1

我也尝试过静态图像，但是它不起作用。 但是，如果您想在页面上显示图片，请使用该图片的base64。

在您的百里香叶子页上使用此代码：

<img th:src="@{data:image/png;base64,YOUR BASE 64}

Answer 2

您应将style属性添加为div，如下所示：

style="background-image: url(<c:url value="/resources/images/bg_1.jpg"/>)"