Thymeleaf .css文件中的URL表达式 [英] Thymeleaf URL expression in .css file
问题描述
我使用Spring MVC和Thymeleaf视图引擎。我有一个外部 style.css 文件与我的页面的CSS。在CSS文件中,我要引用相对图片网址。
这是我的 style.css 文件:
.background {
width:100%;
background-image:url('/ path / to / image / bg.png');
}
上述尝试访问具有以下URL的图像,存在:
http://localhost/path/to/image/bg.png
我的真实形象是:
http://localhost/myapp/path/to/image/bg.png
此StackOverflow问题对于我的内嵌CSS问题的答案:
I'm using Spring MVC and the Thymeleaf view engine. I have an external style.css file with the CSS for my page. In the CSS file, I want to refer to a relative image URL.
This is my style.css file:
.background { width: 100%; background-image: url('/path/to/image/bg.png'); }
The above tries to access an image with the following URL, which doesn't exist:
http://localhost/path/to/image/bg.png
My real image is at:
http://localhost/myapp/path/to/image/bg.png
This StackOverflow question gives the answer to my question for inline CSS: How to set background url for css files in thymeleaf?
But how do I do this for an external .css file?
解决方案Put all your images folder structure with images
path/to/image/bg.png
inside theimages
folder underresources/static
. Then refer to it in CSS as:.background { width: 100%; background-image: url('..images/path/to/image/bg.png'); }
And then you can use this CSS in your templates as:
<head> <link rel="stylesheet" media="screen" th:href="@{/css/application.css}"/> </head>
Your files structure should look like this:
这篇关于Thymeleaf .css文件中的URL表达式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!