关于Thymeleaf中不加载CSS遇到的小坑

最新推荐文章于 2023-04-14 09:52:51 发布
最新推荐文章于 2023-04-14 09:52:51 发布
阅读量1k 收藏
点赞数
分类专栏： 实习经验 文章标签： java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43285863/article/details/119148492
版权

1. 首先检查是否写了头部

注意这段代码是否写在了头部位置

在这里插入图片描述

2.检查是否写了th路径

一般我们在写CSS文件

写成这样就OK了 但是对于Themeleaf来说我们还需要写上 th:href="@{/css/base.css}" 如图：

在这里插入图片描述

这样的写法就正确了

我踩得坑！！！

在这里插入图片描述
一开始我的th中文件写的和html中的href一样，结果死活加载不出来CSS文件
后来将…/static/删除后就好了

刨根问底

在这里插入图片描述
首先这是错误的写法情况下不加载CSS文件
在Chrome中进入开发者模式
在这里插入图片描述
尝试进入base.css文件结果是显示
在这里插入图片描述
此地址并没有正确的显示CSS文件
在这里插入图片描述
而在正确url模式下是可以正常加载的。
在这里插入图片描述
而在IDEA中，这种写法是无法转跳到CSS文件，提示未找到该文件。
在这里插入图片描述
原因是在source中是没有/static这个目录的。
在这里插入图片描述

根据惯性思维，我的JS文件按照CSS文件去写，果不其然又错了。

在这里插入图片描述
正确写法，在SpringBoot的请求中加载正常，但是在静态测试中测试不正常。

OldManWalk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
thymeleaf引入css,js失效
superxmh的博客
07-03 2527
使用SpringBoot开发时,在页面中使用thymeleaf引入css和js资源没有效果，解决办法如下： 查看thymeleaf的命名空间有没有写错 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 2.检测导入css和js资源的语法有没有错,如 <!--css--> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css"
thymeleaf_3.0.5_中文参考手册.pdf
08-20
Thymeleaf 提供了内联的功能，例如内联表达式、内联文本、内联 JavaScript、内联 CSS 等。 13. 文本模板模式 Thymeleaf 提供了文本模板模式的功能，例如文本语法、扩展性、文本原型注释块：添加代码、文本解析器级...
thymeleaf页面js 配置css、js的静态资源路径问题
somdip的博客
04-14 1331
第二种在js中处理，是已加载完后台模板，后端模板的语法已不起作用，直接再这种处理方式，是未加渲染处理的你写的字符串。第一种模板中配置静态资源的访问路径是theamleaf渲染模板中，加载也是渲染时处理。第二中 js中配置静态资源的根路径。第一种 html模板中配置根路径。2、错误的html显示效果。如下（错误示范的效果）1、错误的 js写法。
解决thymeleaf无法加载css样式问题
LA_LA_LA_HAHAHA的博客
07-20 1729
解决thymeleaf无法加载css样式问题 困扰了我一上午的问题终于解决了 在导入bpptstrap模板后无法加载css样式怎么办？ 在原有MyMvcConfig implement WebMvcConfigurer 需要重写书写匹配路径 package com.hyn.config; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springfram
Spring boot使用模板引擎thymeleaf时无法加载样式css(静态资源)的问题
萝卜青菜
03-15 3873
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刨坑——首页加载js/css等失败解决方法
weixin_30301183的博客
12-05 380
　　在使用thymeleaf加载css或js样式，当我们进入登录页的时候发现，所有的样式都是加载失败的。原因是在新版中有这样一个坑……： 　　当我们设置了addInterceptors-注册拦截器的时候，通常会这样设置 /** * 注册拦截器 */ @Override public void addInterceptors(Intercepto...
Thymeleaf无法显示css样式
qq_40571318的博客
12-29 9302
后端是用springboot集成thymeleaf写的，但是前端无论怎么按照语法引入css和都无效，见图： 静态资源的项目结构： 代码： &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta
浅析SpringBoot中使用thymeleaf找不到.HTML文件的原因
08-18
主要介绍了SpringBoot中使用thymeleaf找不到.HTML文件的原因分析，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
thymeleaf_3.0.5中文参考手册.zip
09-28
Thymeleaf中文参考手册3.0.5版，文字版pdf，带目录。 本书以Thymeleaf官方文档为基础，科学系统地、循序渐进地将Thymeleaf的使用方法、技术细节、扩展思路铺展开来，带您走进Thymeleaf的欢乐世界。thymeleaf3.0.5...
thymeleaf-3.0.5中文文档
11-07
thymeleaf-3.0.5中文文档, 目录清晰，官方文档翻译而来
thymeleaf 最新中文文档
07-04
thymeleaf 最新中文文档
No mapping for GET /css/bootstrap.min.css springboot 使用thymeleaf 下的页面的css等样式显示不出来。 MyMvcConfig.ja
qq_36361716的博客
06-27 650
No mapping for GET /css/bootstrap.min.css springboot 使用thymeleaf 下的页面的css等样式显示不出来。 MyMvcConfig.java内加上这两个函数
thymeleaf中关于页面css和js样式加载不出来
m0_51113232的博客
06-17 416
不够认真
BindingException: Type interface xxx.xxx is not known to the MapperRegistry.
EP的别三日
11-24 273
org.apache.ibatis.binding.BindingException: Type interface com.jay.dao.TeacherMapper is not known to the MapperRegistry. at org.apache.ibatis.binding.MapperRegistry.getMapper(MapperRegistry.java:47) at org.apache.ibatis.session.Configuration.getMapper(C
【thymeleaf】Thymeleaf引入css js写法
梓莘
08-20 2784
HTML引入方法： <link href="/css/bootstrap.min.css" rel="stylesheet"> <link th:href="/css/animate.css" rel="stylesheet"/> <script src="/js/jquery.js"></script> thymeleaf引入方法： <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"
Thymeleaf引入公共css
genaro26的博客
01-16 3333
有时候很多css文件是公共的，我们必须要在每个html文件中引入它们，其实我们可以利用Thymeleaf的模板布局，把这些css文件抽出来，同时如果有某个html文件专属的css文件，还可在引入模板的基础上单独引入该css文件。 首先，建立一个公共文件layout.html &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymele...
thymeleaf 修改css,用thymeleaf设置CSS样式属性
weixin_36176386的博客
08-03 2699
-1I hope it will help someone.我希望它会帮助某人。Please make sure that your image SIZE is SMALLER than screen size in pixels. Otherwise, neither 'background' nor 'background-image' did not work for me.请确保您的图片尺...
theamleaf 引用css
T623048540的博客
12-05 1558
<!-- bootstrap.min.css --> <link rel="stylesheet" th:href="@{/css/index/bootstrap.min.css}"> <!-- font-awesome.min.css --> <link rel="stylesheet" th:href="@{/css/index/font-awesome.min.css}"> <!-- owl.carousel.css --> &l.
Thymeleaf 内联表达式、文本、JavaScript、CSS
const_
07-26 1379
文章目录内联表达式th:inline="none" 禁用内联内联 JavaScriptJavaScript ⾃然模版⾼级内联表达式JS序列化内联 CSS 内联表达式 虽然通过 Thymeleaf 标准⽅⾔中的标签属性已经⼏乎满⾜了开发中的所有需求，但是有些情况下更喜欢将表达式直接写⼊到 HTML ⽂本中： 例如有时候这样更合适：< p>Hello, [[${session.user.n...
thymeleaf模版加载css或js
最新发布
06-08
如果你使用 Thymeleaf 模板来构建你的网站，你可以在 Thymeleaf 模板中使用标准的 HTML `<link>` 和 `<script>` 标签来加载 CSS 和 JavaScript 文件。 例如，要加载一个名为 `style.css` 的 CSS 文件，你可以在你的 HTML 页面中添加以下代码： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" type="text/css" href="/path/to/style.css" th:href="@{/path/to/style.css}"> </head> <body> <!-- Your HTML content here --> </body> </html> ``` 这里的 `href` 属性指定了你的 CSS 文件的路径，而 `th:href` 属性则使用了 Thymeleaf 的表达式语言来动态地生成 CSS 文件的路径。注意，这里的路径应该是相对于你的 Web 应用程序的根目录的相对路径。 同样，你可以使用类似的方法来加载 JavaScript 文件。例如： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>My Page</title> <script type="text/javascript" src="/path/to/script.js" th:src="@{/path/to/script.js}"></script> </head> <body> <!-- Your HTML content here --> </body> </html> ``` 这里的 `src` 属性指定了你的 JavaScript 文件的路径，而 `th:src` 属性则使用了 Thymeleaf 的表达式语言来动态地生成 JavaScript 文件的路径。同样需要注意路径相对于 Web 应用程序的根目录。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值