spring如何用thymeleaf添加静态资源答案

【问题标题】：How to add static resources in spring with thymeleafspring如何用thymeleaf添加静态资源
【发布时间】：2019-06-07 15:29:14
【问题描述】：

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

我已经从字面上搜索了这个问题并打开了所有 * 类似的问题，我试图编写一个配置文件，但它没有做任何事情，我不确定这种方法，因为我看到了一些人没有这样做的例子编写任何配置，但他们仍然设法加载所有静态资源，依此类推。是不是需要编写一些秘密的应用程序属性？或者有一个必须编写的配置代码？

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

-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和图片一样。谢谢！

【问题讨论】：

标签： html spring static resources thymeleaf

【解决方案1】：

确保您的 css 和 js 文件采用以下结构：

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

src/main/resources/static/js/things.js
确保您从位于 src/main/resources/templates 中的 spring boot 模板文件夹下的页面调用静态资源
始终使用 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 文件返回的错误，然后在此处发表评论。

【讨论】：

【解决方案2】：

假设您在静态文件夹下有 css 和 js 文件夹，然后像这样使用它 -

<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>

你可能也想看看这些 -

https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js https://www.baeldung.com/spring-mvc-static-resources

值得注意的是，确保你有适当的百里香依赖和标签。

【讨论】：

非常感谢！问题是我遵循了这些规则，但它们似乎不起作用。如果我在浏览器上运行该页面，它会完美显示。如果我用 Tomcat 运行它，它会显示很糟糕。至少后端可以工作。我确实使用了这些标签，还有百里香标签等等。我只是不知道这个错误是什么......
谢谢，但我得出的结论是，在控制器中编写错误的代码会影响要加载的静态资源（我做了一些调试，因为 html 代码和百里香叶语法写得很好）。现在，它们确实加载了。但是控制器没有做我想要的:)))