关于thymeleaf 引入css、js不起作用的问题

最新推荐文章于 2024-08-14 16:40:11 发布
最新推荐文章于 2024-08-14 16:40:11 发布
阅读量1.5w 收藏 4
点赞数 2
分类专栏： thymeleaf 文章标签： thymeleaf 导入js、css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37801313/article/details/79568294
版权 
    <link type="text/css" rel="stylesheet" th:href="@{/css/global.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/icon.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/default/easyui.css}"/>
    <script th:src="@{/js/jquery.easyui.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.form.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/easyui-lang-zh_CN.js}" type="text/javascript"></script>


第一次使用thymeleaf，引入了js、css发现没有作用。。。先贴代码。

查了资料应该是部署后加载和静态加载的问题，没有深入研究，先贴上解决后的代码。

    <link href="css/global.css" type="text/css" rel="stylesheet" th:href="@{/css/global.css}"/>
    <link href="css/icon.css" type="text/css" rel="stylesheet" th:href="@{/css/icon.css}"/>
    <link href="css/default/easyui.css" type="text/css" rel="stylesheet" th:href="@{/css/default/easyui.css}"/>
    <script src="js/jquery.min.js" type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
    <script src="js/jquery.form.js" type="text/javascript" th:src="@{/js/jquery.form.js}" ></script>
    <script src="js/jquery.easyui.min.js" type="text/javascript" th:src="@{/js/jquery.easyui.min.js}" ></script>
    <script src="js/easyui-lang-zh_CN.js" type="text/javascript" th:src="@{/js/easyui-lang-zh_CN.js}"></script>

这样就好了。ps：为什么一定要加上th:inline js代码才起作用。

<script type="text/javascript" th:inline="javascript">


 

 

 


   

 


   


                

        

        

    

  


    

      

        

            

              
                
                  Emws
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
thymeleaf引入css,js失效

				
			

			

				

					superxmh的博客
				

				

					07-03
					
					2566
					
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
springboot整合thymeleaf中html无法引入js，css问题

				
			

			

				

					凌风少年z
				

				

					11-10
					
					3097
					
				

			

		

		

			
				
html文件是我直接从网上下载的模板，然后改成适合自己的，所以涉及到了一些js，css样式
下载之后直接打开浏览器访问是没问题的，但是springboot通过controller访问html页面，发现无法引入静态资源
先看一下我的目录：

当我写登录功能时，controller直接返回login，就是访问登录页面
controller代码：
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
  

			
		

	



                


  
              

                


	

		

			

				
					
thymeleaf 引入js css 无效

				
			

			

				

					Siona_xin 的博客
				

				

					08-03
					
					8851
					
				

			

		

		

			
				
最近使用thymeleaf 引入 js 、css 总是无效。纠结了一会，然后找原因，发现了没有写 type="text/css" ；然后总结了一下，以防下次入坑。



具体解决方案：

1、首先，link 和 script  写法如下：

&lt;link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" /&gt;
&lt...

			
		

	





	

		

			

				
					
Thymeleaf 添加版本号, 解决js css缓存问题

					
最新发布

				
			

			

				

					qq_18155259的博客
				

				

					08-14
					
					236
					
				

			

		

		

			
				
但是这种写法每次都要改版本号, 太麻烦了. 可以给版本号加个随机数, 但是加随机数有个缺点, 浏览器每次都会重新拉数据, 影响性能.浏览器因为存在缓存机制, 改了js css不会立即生效, 可以给路径添加一个版本号实现.这样只有服务器重启, 才会获取新的版本号。

			
		

	



		

			
		



	

		

			

				
					
[java] springboot thymeleaf模板文件未生效

				
			

			

				

					qubes的专栏
				

				

					11-28
					
					522
					
				

			

		

		

			
				
[java] springboot thymeleaf模板文件未生效
problem
引入了thymeleaf模板mvn包
但是页面访问只显示返回字符串’index’，而不是templates目录下的index.html
solutin
原因: 注解不对
@RestController -> @Controller 即可



			
		

	





	

		

			

				
					
springboot项目中使用thymeleaf模板引擎引入js库失效

				
			

			

				

					1号帅比的博客
				

				

					10-05
					
					5249
					
				

			

		

		

			
				
js资源文件所处位置：



 

 

 

 

 

在html文件引用js库


    &lt;script src="../static/scripts/jquery-1.7.2.min..js"&gt;&lt;/script&gt; &lt;!--导入本地js库--&gt;
    &lt;script src="../static/scripts/jquery.validate.m...

			
		

	





	

		

			

				
					
thymeleaf  的html文件引入CSS,js，不起作用

				
			

			

				

					qq_43592495的博客
				

				

					07-07
					
					3714
					
				

			

		

		

			
				
解决thymeleaf  的html文件引入CSS,js，不起作用，如图，需要在引入的css,js中加上th:href="@{/css/_common.css}",图片也一样：th:src="@{/img/srst.png}"
thymeleaf 获取数据也需要th:text="${XXXX}"




			
		

	





	

		

			

				
					
Thymeleaf 引入css js 无效终极解决方案

					
热门推荐

				
			

			

				

					jensen0316的博客
				

				

					07-20
					
					3万+
					
				

			

		

		

			
				
关于springboot集成thymeleaf后引入css和js无效的问题，下面给出了解决方案，直接上图：

以下是关于静态资源的项目结构



在html代码中引用如代码：


&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org"&gt;
&lt;head&gt;
    &lt;title&gt;测试窗口&lt;/...

			
		

	





	

		

			

				
					
springboot-thymeleaf公共css/js 引入失败问题解决方案

				
			

			

				

					qq_36899092的博客
				

				

					11-11
					
					1535
					
				

			

		

		

			
				
thymeleaf引入公共css、js 问题解决方案
目前使用spring boot 框架时，大多使用得都是1.5.*左右的版本。
在以用thymeleaf 前端框架时候，总是会或多或少出现一些问题。
现在对该功能做一次系统全面的步骤解说：

pom.xml配置thymeleaf jar包
我们先以用thymeleaf相关的jar包
		<dependency>
			<grou...

			
		

	





	

		

			

				
					
关于thymeleaf引用js文件和css文件404问题

				
			

			

				

					PurpleERON的博客
				

				

					07-03
					
					1719
					
				

			

		

		

			
				
在自学springboot+mybatis+thymeleaf的时候发现的问题记录一下
在pom.xml文件中配置
<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.output...

			
		

	





	

		

			

				
					
thymeleaf js css404问题

				
			

			

				

					qq_35440570的博客
				

				

					07-06
					
					5294
					
				

			

		

		

			
				
最近被thymeleaf 静态资源困扰，一直404，百度各种，大部分都是相同答案，并不能解决问题。现在贴出解决方案，希望能帮到同样问题的人。@Controller
@RequestMapping("/home")
public class IndexController {
	@RequestMapping("/index")
	public ModelAndView index() {

   ...

			
		

	





	

		

			

				
					
Spring Boot/正确解决Thymeleaf、freemarker引入css、js、img文件无效的问题

				
			

			

				

					qq_38959715的博客
				

				

					02-22
					
					5362
					
				

			

		

		

			
				
之前遇到这个问题的时候，在网上查了半天都没有找到正确的解决方法。今天想起来了，简单整理发上来了

 

首先本问题是基于Spring Boot的情况下的，其他情况类比解决就行

 

一、将前端文件放入项目时，首先确认路径：



src/main/resources/static

css、js、img文件应放在static下：SpringBoot下系统默认扫描静态文件的位置

HTML文件应该...

			
		

	





	

		

			

				
					
前端js引用＋JavaScript

				
			

			

				

					weixin_73592765的博客
				

				

					07-29
					
					142
					
				

			

		

		

			
				
">上海</div><input type="button" value="提交" onclick="getInfo()"><input type="text" id="txtUser" placeholder="用户名"><input type="button" value="删除" class="delete"><input type="button" value="删除" class="delete"><input type="button" value="删除" class="delete">

			
		

	





	

		

			

				
					
spring boot+layui分页实战

				
			

			

				

					我是一只蘑菇17的博客
				

				

					10-28
					
					298
					
				

			

		

		

			
				
图书搜索页

			
		

	





	

		

			

				
					
013-springboot-thymeleaf-常用属性

				
			

			

				

					Allure泽宇的博客
				

				

					06-02
					
					3129
					
				

			

		

		

			
				
1、创建 SpringBoot 的 web 项目并使用模版引擎
1.1 创建module
020-springboot-thymeleaf-property



1.2 查看pom文件的依赖
pom.xml中应该有以下两个依赖



1.3 编辑核心配置文件



1.4 引入lombok依赖
 	<dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lom

			
		

	





	

		

			

				
					
Thymeleaf模板引擎常用总结

				
			

			

				

					今天又是充满希望的一天
				

				

					11-14
					
					2010
					
				

			

		

		

			
				
一：语法简单总结

          Thymeleaf是一个Java类库,是xml/html/html5的模板引擎,SpringBoot框架推荐在MVC的Web应用做做View层使用.

          SpringBoot中整合Thymeleaf依赖如下.


&lt;dependency&gt;
     &lt;groupId&gt;org.springframework.boot&...

			
		

	





	

		

			

				
					
Springboot前端thymeleaf html页面js,css相对路径引用问题解决

				
			

			

				

					PLA12147111的博客
				

				

					12-20
					
					1万+
					
				

			

		

		

			
				
怕你们没心思全部看完,直接把解决方案放在最开头吧!

第一种方案:


<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标,然后你的css或js或src原来是怎么样还是什么样 -->
    <base th:href="@{/}">

第二种方案:


<!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路...

			
		

	





	

		

			

				
					
踩坑日记——thymeleaf 模板引入js 报错：cannot find declaration to go to

				
			

			

				

					金蒂
				

				

					03-05
					
					3022
					
				

			

		

		

			
				
thymeleaf 模板引入js 报错：cannot find declaration to go to

			
		

	





	

		

			

				
					
SpringBoot+themleaf 页面加载不到css和js静态资源文件终极解决方案

				
			

			

				

					xue_yujie的博客
				

				

					05-20
					
					3216
					
				

			

		

		

			
				
SpringBoot+themleaf 页面加载不到css和js文件终极解决方案
因为项目需要百度了一天终于解决：

页面中css及js的路径引用

<link href="../static/css/demoTest.css"  th:href="@{/css/demoTest.css}"  rel="stylesheet">
<script src="../static/js...

			
		

	





	

		

			

				
					
thymeleaf引入css和js无效

				
			

			

				

					05-24
				

			

		

		

			
				
通常情况下，Thymeleaf引入CSS和JS文件无效的原因可能是以下几个：

1. 路径问题：请确保CSS和JS文件的路径正确，并且相对于HTML文件的路径正确。可以使用相对路径或绝对路径来引用文件。

2. 静态资源处理器问题：请确保您已经正确地配置了Thymeleaf的静态资源处理器。例如，对于Spring Boot项目，您可以在application.properties文件中添加以下配置：

```
spring.resources.add-mappings=true
```

3. 缓存问题：如果您已经修改了CSS或JS文件，但是看不到更改，可能是缓存问题。尝试清除浏览器缓存或使用Chrome的无缓存模式。

4. 语法问题：请确保您的CSS和JS文件没有语法错误，因为这可能会导致文件无法加载。

希望这些解决方案可以帮助您解决问题。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值