html頁面的絕對路徑和相對路徑

  在用springmvc架構開發網站的過程中，離不開開發前台html頁面，html經常需要使用本地相關的資源，如：圖片，js，css等，一般情況下，我們可以通過使用相對路徑的方式來對這些資源進行指向和訪問，如：

 

 如上圖的代碼，可以用瀏覽器直接打開此處的代碼，banner-graphic.png圖片也能夠正常顯示在頁面上，但是，在啟動服務器時，在瀏覽器中打開此文件的時候，圖片並不會顯示。

本系統使用mustache來完成頁面的渲染，具體的viewresolver配置如下：

<bean id="viewResolver" class="org.springframework.web.servlet.view.mustache.MustacheViewResolver">
<property name="cache" value="false" />
<property name="prefix" value="WEB-INF/mustache/" />
<property name="suffix" value=".mustache" />
<property name="templateLoader">
<bean class="org.springframework.web.servlet.view.mustache.MustacheTemplateLoader" />
</property>
<property name="order" value="1" />
</bean>

也就是WEB-INF/mustache/ 目錄下的文件可以直接通過服務器前綴訪問如： http://localhost:8080/spring-mvc/login.mustache，也就是說被攔截的頁面和沒有被攔截的頁面可能訪問形式相同，但是在服務器中存放的位置有很大不同。

雖然login.mustache不在webapp目錄下面，但此時的服務器路徑並非為http://localhost:8080/spring-mvc/WEB-INF/mustache/login.mustache

而此文件中的背景圖片引用為”background-image:../../images/banner-graphic.png“，圖片地址自動變為http://localhost:8080/images/banner-graphic.png，顯然無法顯示圖像，只有圖片為

http://localhost:8080/spring-mvc/images/banner-graphic.png才能夠正常顯示圖像，故html中使用服務器端物理位置的相對路徑並不能保證資源被瀏覽器正常訪問到，解決方案如下：

1.使用一個變量來存放服務器的路徑，如：contextPath,

public Map<String, Object> newModel(HttpServletRequest re) {

Map<String, Object> map = new HashMap<String, Object>();
map.put("contextPath", re.getContextPath());
return map;
}

2.這個變量已經包含了服務器的根地址，所有的html頁面可以使用這個統一的根地址指向，也就是webapp目錄，於是所有的js，css文件就可以有唯一的定位，如：<link rel="stylesheet" type="text/css" href="{{contextPath}}/styles/login.css"/>指向的就是webapp/styles/login.css文件，{{contextPath}}可以由controller內傳遞出來的值解析，並且css內部的圖像引用就可以自由的使用相對路徑而不會出現任何報錯，實例css文件：

#head-image{
height:75px;
margin-bottom:0;
background-image:url(../images/banner-graphic.png);
}