如何在 Spring Boot Thymeleaf 模板的内联背景图像 css 标记中添加静态图像？答案

【问题标题】：How to add static image in inline background-image css tag in Spring boot Thymleaf template?如何在 Spring Boot Thymeleaf 模板的内联背景图像 css 标记中添加静态图像？
【发布时间】：2019-02-10 15:50:56
【问题描述】：

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

在我的Thymeleaf 页面之一中，我想使用内联CSS 将图像添加为背景图像。我的图像在静态文件夹中，我尝试使用在互联网上找到的各种方法，但都没有奏效。我已经搜索过，很遗憾未能找到解决此问题的方法。

我尝试th:style tag 并在谷歌中搜索以了解此标签的工作原理，但遗憾的是无法正确理解此标签。

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

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}+')'"

【问题讨论】：

您能描述一下您所面临的错误，而不仅仅是 IDE 上显示的红色标记。您的代码应该可以正常工作，我将其粘贴到我的 IDE 中，但没有显示任何错误突出显示，它也可以正常工作。
您的用法似乎没问题。你检查了stackoverflow.com/questions/29140647/…。和你问的完全一样。

标签： java spring spring-boot thymeleaf

【解决方案1】：

您应该将style 属性添加到您的 div 中：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：