thyemleaf引入js和css路径问题

问题描述

在公共模板框架文件layout.html头部引入css和js文件，在不同的Controller中提示css和js文件找不到。

问题解决

主要是文件相对路径和绝对路径的问题。

thyemleaf的th:href=“@{...}”标签路径如果用“/”开头的，则路径最终为当前项目下的路径；如果不是用“/”开头的即相对路径，则路径最终以当前访问的Controller路径的相对路

径。

例如：

项目名admin_test

相对路径：<link th:href="@{css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>

在http://localhost:8080/admin_test/merchant下访问相对路径http://localhost:8080/admin_test/css/bootstrap.min.css（正确路径）

在http://localhost:8080/admin_test/merchant/input下访问相对路径http://localhost:8080/admin_test/merchant/css/bootstrap.min.css（错误路径）

绝对路径：<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>

在http://localhost:8080/admin_test/merchant下访问绝对路径http://localhost:8080/admin_test/css/bootstrap.min.css（正确路径）

在http://localhost:8080/admin_test/merchant/input下访问绝对路径http://localhost:8080/admin_test/css/bootstrap.min.css（正确路径）

结论

在公共框架文件中引入文件，用“/”开头的绝对路径，保证文件引用的是基于项目名下的。