靜態資源沒有加載到百里香模板

我是新手到春百里香，我有一個網頁被分成頁眉，正文和頁腳，但是當我試圖包含頁眉然後CSS和js沒有加載到網頁。靜態資源沒有加載到百里香模板

我的文件夾結構看起來像

main 
 
\t java 
 
\t resources 
 
\t web-resources 
 
\t \t css 
 
\t \t jss 
 
\t \t views 
 
\t webapp 
 
\t \t META-INF 
 
\t \t resources 
 
\t \t \t css 
 
\t \t \t jss 
 
\t \t \t views

而且我thymeleaf配置是： -

<bean id="templateResolver" 
 
\t \t class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"> 
 
\t \t <property name="prefix" value="/resources/views/" /> 
 
\t \t <property name="suffix" value=".html" /> 
 
\t \t <property name="templateMode" value="HTML5" /> 
 
\t \t <!-- Template cache is set to false (default is true). --> 
 
\t \t <property name="cacheable" value="false" /> 
 
\t </bean> 
 

 
\t <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine"> 
 
\t \t <property name="templateResolver" ref="templateResolver" /> 
 
\t </bean> 
 

 
\t <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver"> 
 
\t \t <property name="templateEngine" ref="templateEngine" /> 
 
\t </bean>

我的頭呃CSS包括看起來像： -

<head> 
 
     <meta charset="utf-8"/> 
 
     <title>test</title> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"/> 
 
     
 
      <link type="text/css" href="../../css/bootstrap-min.css" rel="stylesheet" th:href="@{/resources/css/bootstrap-min.css}"/> 
 
    
 
\t \t <link type="text/css" href="../../css/bootstrap-theme-min.css" rel="stylesheet" th:href="@{/resources/css/bootstrap-theme-min.css}"/> 
 
     <script src="../../js/jquery-1.11.1.min.js"></script> 
 
     <script src="../../js/bootstrap-min.js"></script> 
 
    </head>

和主HTML是： -

<head> \t 
 
\t <title>Hello</title> 
 
    \t <link type="text/css" href="../css/bootstrap-min.css" rel="stylesheet" th:href="@{/resources/css/bootstrap-min.css}"/> 
 
\t <link type="text/css" href="../css/bootstrap-theme-min.css" rel="stylesheet" th:href="@{/resources/css/bootstrap-theme-min.css}"/> 
 
\t 
 
    <script src="../js/jquery-1.11.1.min.js" th:src="@{/resources/js/jquery-1.11.1.min.js}"></script> 
 
    <script src="../js/bootstrap-min.js" th:src="@{/resources/js/bootstrap-min.js}"></script> 
 
</head> 
 
<body> 
 
<div th:include="fragments/header :: header"></div>

但仍當我請求頁面，則顯示404對CSS和JSS

來源

2014-11-09 Apollo

不要在片段中重複頭元素。你目前正在做的是試圖在體內添加一個重複的頭元素。像在jsp導入中那樣只包含頭部的正文部分。

來源

2014-11-10 10:40:23 grid

感謝回答，我已經在我的Spring MVC構造修復資源路徑解決了這個問題，但沒有想到都給重複的頭。非常感謝您指出潛在問題。 – Apollo 2014-11-11 05:07:01

您可以更改：

<script src="../../js/bootstrap-min.js"></script>

到

<script th:src="@{/resources/js/bootstrap-min.js"></script>

來源

2016-07-11 02:52:02

與答案添加一些解釋如何回答幫助OP中如果使用SRC像「../../js/bootstrap-min.js」修復當前問題 – 2016-07-11 03:14:56

。它只用於localhost中的靜態html。當在服務器部署，我們應該得到js和css根據網址，例如： 'HTTP：//本地主機：8080 /項目名稱/資源/ JS /引導-min.js'。在更改爲「@ {/ resources/js/bootstrap-min.js」後，thymeleaf會將url解釋爲正確的url。你可以在http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#link-urls看到它 – 2016-07-11 07:16:39

靜態資源沒有加載到百里香模板

回答

相關問題