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

最新推荐文章于 2024-05-26 19:47:59 发布

PLA12147111

最新推荐文章于 2024-05-26 19:47:59 发布

阅读量1.2w

点赞数 7

分类专栏： java html thymeleaf springboot

本文链接：https://blog.csdn.net/PLA12147111/article/details/85131786

版权

java 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

springboot

2 篇文章 0 订阅

订阅专栏

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

第一种方案:

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

第二种方案:

<!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路径},缺陷就是每次引用都必须带上th:src="@{/}"这个才能正确引用,具体用什么方式,看你们自己 -->
    <script th:src="@{/js/myjs.js}"></script>

目录结构如下:

controller.java

springboot中,通过application启动工程,在本地访问,以访问login.html为例,

login.html链接为:http://localhost:8080/test1/login

打开F12,监控network,

network中,mycss.css引用地址为:http://localhost:8080/css/mycss.css

此时,如果将该工程打包成war包,放到tomcat下运行,那么访问地址应为:http://localhost:8080/工程名/test1/login

此时css地址仍为:http://localhost:8080/css/mycss.css,那么此时css就会报404错误,无法正确引入,这个就是引用路径问题,解决办法如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Login</title>
    <!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
    <base th:href="@{/}">
    <!-- 上面定义了base路径标签,那么这里的css路径就可以直接写css路径,Springboot中,static文件夹默认就是静态资源文件夹,所以这里static/css/mycss.css可以不写static/了 -->
    <link href="css/mycss.css" rel="stylesheet">

    <!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路径},缺陷就是每次引用都必须带上th:src="@{/}"这个才能正确引用,具体用什么方式,看你们自己 -->
    <script th:src="@{/js/myjs.js}"></script>

</head>
<body onload="f()">
<!--<div style="text-align: center;margin:0 auto;width: 1000px; ">-->
<div class="mydiv">
    <h1>配置Thymeleaf模板</h1>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr th:each="Admin:${list}" >
            <td th:text="${Admin.id}"></td>
            <td th:text="${Admin.a_id}"></td>
            <td th:text="${Admin.a_pwd}"></td>
        </tr>
    </table>
    <h2>ddd</h2>
</div>
</body>
</html>

个别比较倾向于在头部添加<base th:href="@{/}">标签,这样就不用在每个需要引入的地方都使用Thymeleaf th:href="@{/路径}"语法.

PLA12147111

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
Springboot前端thymeleaf html页面js,css相对路径引用问题解决

怕你们没心思全部看完,直接把解决方案放在最开头吧!第一种方案: <base th:href="@{/}">第二种方案:<!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路...
复制链接

扫一扫