Springboot中使用Thymeleaf模板引擎加载CSS样式等静态资源无效

最新推荐文章于 2023-12-21 22:42:35 发布
最新推荐文章于 2023-12-21 22:42:35 发布
阅读量1.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44571808/article/details/117386489
版权

遇到一个问题：Springboot中使用Thymeleaf模板引擎加载CSS样式等静态资源无效
一、 如何使用Thymeleaf模板
1、 在pom.xml中引入thymeleaf依赖
在这里插入图片描述
2、 由于Springboot默认使用的版本是thymeleaf2.0的，我需要的是3.0的，要指定版本号
在这里插入图片描述

3、 CSS样式等需使用th:href属性，路径需使用 @{ 文件路径 } 包裹，静态资源路径可不使用th:href属性，路径需使用 @{ 文件路径 } 包裹
在这里插入图片描述

4、 图片路径需使用th:href属性，路径需使用 @{ 文件路径 } 包裹
在这里插入图片描述

二、 使用Thymeleaf模板后CSS样式等无效
使用了thymeleaf模板后启动，CSS样式无效呢？
在这里插入图片描述

在确定依赖已经引入，路径使用 @{ 文件路径 } 包裹都没有错，还是无效，重启IDEA
在这里插入图片描述

weixin_44571808
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot+Thymeleaf中静态资源css、js等的引用问题
qq_27198345的博客
12-17 2979
SpringBoot + Thymeleaf项目中静态资源的引用问题是非常常见的问题，也是最头疼的问题，其实一点儿也不难，只是有几个问题没注意到始终无法解决。 静态资源的位置 1、 在SpringBoot项目运行的时候，引用静态资源需要使用Thymeleaf. <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"&gt
SpringBoot --thymeleaf引入css无效问题
qq_41557315的博客
03-29 1132
首先导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 再更改下thymeleaf的版本 <p...
SpringBoot--thymeleaf页面（资源文件css、js的引入）
热门推荐
小石潭记丶
05-29 8万+
1.目录结构： 工程的pom.xml： <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=...
浅析SpringBoot中使用thymeleaf找不到.HTML文件的原因
08-18
主要介绍了SpringBoot中使用thymeleaf找不到.HTML文件的原因分析，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
主要给大家介绍了关于Spring Boot集成Thymeleaf模板引擎的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
SpringBoot解决整合thymeleaf静态资源以及没有整合时都无法访问的尝试
01-08
本来今天写的JS代码就看不太懂，结果后端静态资源映射又出现问题了。以为是路径扫描错误或者是拦截器拦截了，没有配置拦截器，所以以为是路径扫描错误所以这样进行了重新配置： /** * 映射静态资源 */ //@Configuration //public class WebMvcConfig extends WebMvcConfigurationSupport { // /** // * 配置静态资源 // * @param registry // */ // @Override // protected void addResourceHandler
SpringBoot集成Thymeleaf模板引擎的html、css和js存放位置
何哥的博客
04-12 2744
如我的页面为hello-world.html,它所在的目录结构就应该为resource–> templates --> hello-world.html在controller中，return的值则为 /hello-world ，系统会自动给加上.html的后缀。css引入增加 th:href配置路径，js引入增加th:src路径配置。我的页面中本来都是直接使用的element-ui和vue直接提供的在线js，但是因为页面嵌套会有跨域的问题，所以页面中的js、css都要改为使用本地文件。
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码
lucky_fang的博客
07-09 1650
很多时候，我们在网上搜索官网demo源码时，总是找不到适合自己的，要么不好看要么源码复杂要么跟自己擅长的开发语言不同。 本人最近纯手工开发了一个官网，前端+后台，为了简单就省略了数据库，需要数据库交互的可以自己后期补充叠加，也是很方便的，保证新手一看就会。 springboot真的很受欢迎，所以本人也采用了 springboot+thymeleaf+maven+html+css
Spring boot使用模板引擎thymeleaf时无法加载样式css(静态资源)的问题
萝卜青菜
03-15 3744
Spring boot使用模板引擎thymeleaf时无法加载样式css静态资源的问题 1,没有引入th:*属性命名空间 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 在模板引擎的头部引入命名空间 2,联入css等静态资源时，没有加命名空间th:，导致静态资源加载不到 <link th:href="@{ /css/bootstrap.min.css }" rel="stylesheet"> 注意hre
Springboot整合Thymeleaf引入公共的CSS和JS文件的方法
最新发布
hyc_zzn520的专栏
12-21 1208
Springboot整合Thymeleaf引入公共的CSS和JS文件的方法，使用th:replace标签
Springboot怎么集成Thymeleaf模板引擎？
03-07
Springboot怎么集成Thymeleaf模板引擎？
springboot如何使用thymeleaf模板访问html页面
08-27
springboot中推荐使用thymeleaf模板，使用html作为页面展示。那么如何通过Controller来访问来访问html页面呢？下面通过本文给大家详细介绍，感兴趣的朋友跟随脚本之家小编一起看看吧
springboot框架+thymeleaf模板引擎+layui前端框架+数据库
12-19
开源项目结合了springboot框架+thymeleaf模板引擎+layui前端框架+数据库+redis等技术
springboot中thymeleaf模板使用详解
08-30
将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎，在spring4.0中推荐使用thymeleaf来做前端模版引擎。
SpringBoot中的Thymeleaf模板
10-17
Thymeleaf 的出现是为了取代 JSP，虽然 JSP 存在了很长时间，并在 Java Web 开发中无处不在，但是它也存在一些缺陷。在这篇文中给大家介绍了这些缺陷所存在问题，对spring boot thymeleaf 模板相关知识感兴趣的朋友...
Springboot整合thymeleaf时静态资源无法加载
qq_66468682的博客
04-11 1336
一、问题复现 启动springboot项目后，登录进首页时，始终加载不出CSS样式 所有的文件都是200的状态码，并且在源码中的head标签中，css样式也加载进去了，但页面并没有显示CSS样式。 二、原因分析 发送的请求为：http://localhost:8080/1001/nihao 后台接收处理该请求的方法为： @Controller public class IndexController { @GetMapping("/{id}/{name}") public String
这就是学Java必须掌握的Spirng boot！21道关键性技术题你掌握了吗？
S11035762的博客
09-20 673
前言 多年来，随着新功能的增加，spring 变得越来越复杂。访问spring官网页面，我们就会看到可以在我们的应用程序中使用的所有 Spring 项目的不同功能。如果必须启动一个新的 Spring 项目，我们必须添加构建路径或添加 Maven 依赖关系，配置应用程序服务器，添加 spring 配置。因此，开始一个新的 spring 项目需要很多努力，因为我们现在必须从头开始做所有事情。 Spring Boot 是解决这个问题的方法。Spring Boot 已经建立在现有 spring 框架之上。使用 sp
SpringMVC中thymeleaf配置后无法导入js，css等静态资源
weixin_58789905的博客
05-20 868
SpringMVC中thymeleaf配置后无法导入js，css等静态资源
解决thymeleaf引入靜態js，css失效
一个努力的小码农
08-28 823
thymeleaf引入靜態js，css失效 配置properties文件 #thymeleaf訪問根路徑 spring.thymeleaf.prefix=classpath:/templates/ #後綴名 spring.thymeleaf.suffix=.html #模板格式 spring.thymeleaf.mode=HTML5 #字符格式 spring.thymeleaf.encoding=UTF-8 #在呈现模板之前检查模板是否存在,默認true spring.thymeleaf.check-t
thymeleaf模板引擎访问html,SpringBoot使用Thymeleaf模板引擎访问静态html的过程
06-09
在Spring Boot中使用Thymeleaf模板引擎访问静态HTML的过程如下： 1. 在Spring Boot工程中创建一个静态HTML文件，例如index.html。 2. 在application.properties文件中添加以下配置： ``` spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html ``` 这个配置告诉Thymeleaf模板引擎，它应该在classpath:/templates/目录下查找HTML模板文件，后缀为.html。 3. 创建一个Controller，用于处理请求并将数据传递给模板： ```java @Controller public class HomeController { @GetMapping("/") public String home(Model model) { model.addAttribute("message", "Hello, world!"); return "index"; } } ``` 这个Controller处理根路径的GET请求，并将一个名为message的属性添加到Model中。然后，它返回index作为视图的名称。 4. 在index.html中使用Thymeleaf模板引擎来呈现message属性： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> <h1 th:text="${message}"></h1> </body> </html> ``` 这个HTML文件使用Thymeleaf的th:text属性来呈现message属性。 5. 启动Spring Boot应用程序，并访问http://localhost:8080/，应该看到Hello, world!。 注意：在上述步骤中，我们将HTML文件放在了classpath:/templates/目录下，这是因为Thymeleaf默认会在这个目录下查找模板文件。如果你想将HTML文件放在其他地方，可以在application.properties文件中通过配置spring.thymeleaf.prefix属性来指定模板文件的路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值