如何使用thymeleaf在spring中添加静态资源

2024-01-11

我是新来的Spring我正在尝试制作一个漂亮的 Web 应用程序,到目前为止,我设置了所有内容,如果我在浏览器上运行我的页面,它会按预期显示。但是如果我在端口上使用 tomcat 运行它8080(我正在使用 Intellij)它无法加载css and js文件甚至不是图片。

我已经逐字搜索了这个问题并打开了所有StackOverflow类似的问题,我尝试编写一个配置文件,但它没有做任何事情,而且我对这种方法不确定,因为我见过没有编写任何配置的人的例子,但他们仍然设法加载所有静态资源,等等。是不是需要写一些秘密的应用程序属性?或者有需要写的配置代码?

我的资源文件夹如下所示:

-resources
    -static
        -CSS 
            -things.css
        -JS
            -datepicker.js
        -Images
            -many pictures
    -templates
        -Home.html and other pages

我用来引用static-CSS-things.css的代码是这样的:

link href="../static/CSS/things.css" th:href="@{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"

我以为这会让我的 css 文件加载,但事实并非如此。 js 和图片也是如此。谢谢你!


  1. 确保您的 css 和 js 文件采用以下结构:

    src/main/resources/static/css/things.css

    src/main/resources/static/js/things.js

  2. 确保您从 Spring Boot 模板文件夹下的页面调用静态资源,该文件夹位于 src/main/resources/templates 中

  3. 始终使用 thymeleaf 标签引用您的资源,因为这样无论您在哪个端口运行应用程序,它都将始终正确加载。

src/main/resources/templates/example.html

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- CSS -->
    <link th:href="@{/css/things.css}" rel="stylesheet"></link>
    <!-- JS -->    
    <script th:src="@{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>

如果仍然不起作用,请尝试使用 Google Chrome 中的检查,转到“网络”选项卡并检查从 css 和 js 文件返回的错误,然后在此处发表评论。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用thymeleaf在spring中添加静态资源 的相关文章

随机推荐