html - spring如何用thymeleaf添加静态资源
问题描述
我是Spring新手,我正在尝试制作一个漂亮的 Web 应用程序,到目前为止,我设置了所有内容,如果我在浏览器上运行我的页面,它会按预期显示。但是,如果我在端口8080上使用 tomcat 运行它(我使用的是 Intelijj),它不会加载css和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和图片一样。谢谢!
解决方案
确保您的 css 和 js 文件具有以下结构:
src/main/resources/static/css/things.css
src/main/resources/static/js/things.js
确保您从 spring boot 模板文件夹下的页面调用静态资源,该文件夹位于 src/main/resources/templates
始终使用 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 文件返回的错误,然后在此处发表评论。
推荐阅读
- ios - 检测 iOS 表单关闭 Google 登录
- javascript - 合并两个表单值并发送
- rust - rust 如何决定使用哪个宏分支?
- html - 将数据保存在旧数组中的角度拖放
- sql - 在 sequelize 中创建一个数组并将数据存储为一个数组
- angular - 同源策略不允许在 iib 应用程序和角度读取远程资源
- r - 如何使用 fancyhead 在 rmarkdown 中包含自定义标题
- python - 如何抑制指数显示输出
- pandas - Pandas ETL:如何轻松管理两个大表的列映射?
- mysql - 无法使用 MySQL ODBC 3.51.30 驱动程序创建新的文件数据源以连接到 MySQL,但使用连接器 v8.0.23 有效