Spring boot使用模板引擎thymeleaf时无法加载样式css(静态资源)的问题

最新推荐文章于 2022-05-20 12:21:05 发布
最新推荐文章于 2022-05-20 12:21:05 发布
阅读量3.7k 收藏 7
点赞数 9
分类专栏： SpringBoot系列 Java SpringBoot 文章标签： java spring 5 spring boot css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/varts_z/article/details/114848399
版权

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">

    注意href值要使用@{}来包住静态资源地址在这里插入图片描述

  • 3,静态资源地址错误

th:href="@{/css/bootstrap.min.css}"

注意此处的绝对路径是在resources资源包下的static静态资源包下开始的。对应th:href="@{/css/bootstrap.min.css}"

在这里插入图片描述

  • 4,访问静态资源被拦截器拦截了

    检查自己拦截器拦截了静态资源。
    这是我遇到的情况在这里插入图片描述
    我的拦截器拦截了所有请求，之前放行了index,login等页面，后面发现模板引擎的css样式无法加载，后来发现拦截器会拦截静态资源，如果有这种情况，请给静态资源放行！

以上就是我总结遇到springboot静态资源无法加载的问题，更多的可以参考官方文档https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

Thomasdududu~
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SpringBoot2.x｜Thymeleaf页面不能正常载入css、js文件
HiterCoder
06-16 656
SpringBoot2.x｜Thymeleaf页面不能正常载入css、js文件 1、实现实现WebMvcConfig配置类可以解决页面不能加载css,js的问题； 1 package com.bie.config; 2 3 import org.springframework.context.annotation.Configur...
Spring Boot Web 静态文件缓存处理的方法
08-27
本篇文章主要介绍了Spring Boot Web 静态文件缓存处理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
主要给大家介绍了关于Spring Boot集成Thymeleaf模板引擎的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
spring boot开发 静态资源加载不出来
weixin_30600503的博客
05-26 743
spring boot 1.5 版本之前 不拦截静态资源 springboot 2.x版本 拦截静态资源 private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/s...
springboot thymeleaf静态资源引入失效问题解决
qq_41385887的博客
03-02 1137
首先!检查你的springboot版本是不是2.0x! 众所周知,springboot2.0以上的版本是基于spring5.0了. 说明什么问题?告诉你,在底层是有一些变动的,比如拦截器. 这就是为什么在springboot1.5能访问到但是2.0就不行了. 解决办法: 新建一个config类: @Configuration public class MyMvcConfig extends Web...
解决thymeleaf无法加载css样式问题
LA_LA_LA_HAHAHA的博客
07-20 1713
解决thymeleaf无法加载css样式问题 困扰了我一上午的问题终于解决了 在导入bpptstrap模板后无法加载css样式怎么办？ 在原有MyMvcConfig implement WebMvcConfigurer 需要重写书写匹配路径 package com.hyn.config; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springfram
Springboot中使用Thymeleaf模板引擎加载CSS样式等静态资源无效
weixin_44571808的博客
05-29 1515
遇到一个问题：Springboot中使用Thymeleaf模板引擎加载CSS样式等静态资源无效 一、 如何使用Thymeleaf模板 1、 在pom.xml中引入thymeleaf依赖 2、 由于Springboot默认使用的版本是thymeleaf2.0的，我需要的是3.0的，要指定版本号 3、 CSS样式等需使用th:href属性，路径需使用 @{ 文件路径 } 包裹，静态资源路径可不使用th:href属性，路径需使用 @{ 文件路径 } 包裹 4、 图片路径需使用th:href属性，路径需使用
解决Spring boot html引用css无效
long_songs的博客
07-11 1297
今天在做spring的时候，引用了css地址也是正确的（一个很普通的换背景颜色），在idea上面直接打开是有的 但是在localhost跑起来就是没有显示样式， 刚入门也不太懂，按照书上的相对地址或者是th:href=@{}都没有用，最后是在application.properties文件里面加上 spring.mvc.static-path-pattern=/static/** 即可，我的html是放在templates下面，css是放在static下面 最..
关于Thymeleaf中不加载CSS遇到的小坑
qq_43285863的博客
07-27 1029
1. 首先检查是否写了头部 注意这段代码是否写在了头部位置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d9ae61ba5e564cff998245a3514c0f3d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg1ODYz,size_16,color_FFFFFF,t_70) # 2.检
springboot项目直接导入静态资源使用，样式没有生效
aurora125的博客
05-14 1430
问题描述 在springboot web开发时，直接导入html、css、js等等，启动项目，浏览器打开发现样式没有生效，找不到引入的静态资源。 解决方式 在springboot中引入thymeleaf 所有URL改成@{/ }并添加 th：，此处 / 代表static根目录 在引入静态资源的时候最好看清楚目录文件层级关系，按照那个顺序导入。 ...
Information-Keeper-SB:使用 Spring Boot、Spring Data JPA、Thymeleaf 模板引擎和 Spring Security 的信息保持 Web 应用程序
08-05
使用MVC模式使用的依赖： Spring Web, Hibernate, Data JPA, Thymeleaf, Security, PostgresSQL项目文件结构java -> 所有源代码静态 -> 所有 CSS、JS 和图像以及所有静态文件（如果有） 模板 -> 所有 HTML 文件 ...
Spring Boot 使用addviewController()实现无业务逻辑跳转,，出现静态资源映射找不到的情况 。No mapping for GET xx.css
12-21
3.继承WebMvcConfigurationSupport导致静态资源无法访问 4.WebMvcAutoConfiguration Did not match，webmvcAutoConfiguration配置没有加载 5.ThymeleafAutoConfiguration加载条件 1.实现无业务逻辑跳转  有的时候...
hotel-reservation-springmvc:使用弹簧靴和百里香的酒店预订系统
05-08
使用弹簧靴和百里香的酒店预订系统。 该项目实现了一个复杂的域模型，该模型为基于会话的向导表单流提供了预订... 这是标准的Spring Boot入口点，如果您不想运行由mvn生成的jar，则可以在intellij中运行它。 。 要在I
SpringBootDay01-HelloWorld-1.0-SNAPSHOT.jar
04-14
可以使用模板引擎（freemarker、thymeleaf）； application.properties：Spring Boot应用的配置文件；可以修改一些默认设置； ———————————————— 版权声明：本文为CSDN博主「倦眼问酒书j」的原创...
themlef加载顺序
qq_42267491的博客
08-18 643
在练习一个简单的springboot项目中，前端为html和themlef，controller传入列表，列表为员工所组成，themlef遍历传入的列表，但是date参数，及themlef中和对象中的属性名不一致，会直接报错，页面还在，但图中画圈的部分没有信息显示，由此可得themlef加载顺序 ...
spring boot(四)：thymeleaf使用详解
weixin_33804990的博客
09-02 4045
在上篇文章springboot(二)：web综合开发中简单介绍了一下thymeleaf，这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎，在spring4.0中推荐使用thymeleaf来做前端模版引擎。 thymeleaf介绍 简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相...
Springboot-Thymeleaf常用语法
weixin_45203607的博客
09-15 1256
Thymeleaf常用语法 引入 Thymeleaf 修改 html 标签用于引入 thymeleaf 引擎，这样才可以在其他标签里使用 th:* 语法，这是下面语法的前提。 <html lang="en" xmlns:th="https://www.thymeleaf.org"> 标准表达式语法 ${…} 变量表达式，(常用) 变量表达式（美元表达式），用于访问容器上下文环境中的变量，功能同jstl中${} 一、可以获取对象的属性和方法 二、可以使用ctx，vars，locale，reques
SpringMVC中thymeleaf配置后无法导入js，css等静态资源
weixin_58789905的博客
05-20 868
SpringMVC中thymeleaf配置后无法导入js，css等静态资源
themlef
qq_37928045的博客
05-06 8010
一、引用命名空间 在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。 二、输出内容 2.1 <p th:text="#{home.welcome}">Welcome to our grocery store!</p> 说明： 1. th:text...
spring boot thymeleaf js
最新发布
09-29
根据你提供的引用内容，你怀疑在Spring Boot中进行资源转发的过程中可能发生了拦截导致404错误。为了解决这个问题，可以尝试以下方法: 1. 确保你的资源文件（如js文件）位于正确的位置，可以被Spring Boot找到。你可以将这些文件放在src/main/resources/static目录下。 2. 确保在Thymeleaf模板中正确引用了你的js文件。你可以使用Thymeleaf的语法来引用静态资源文件，例如在<img>标签中使用th:src="@{/img/2.jpg}"引用图片文件。 3. 如果你使用了Thymeleaf模板引擎来引入CSS文件，请确保在<link>标签的href属性前加上th:前缀，例如th:href="@{/css/second.css}"。 请尝试以上方法来解决你遇到的问题。如果问题仍然存在，请提供更多的详细信息以便我能够帮助你进一步解决。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Thomasdududu~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值