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

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

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

也就是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 newModel(HttpServletRequest re) {

Map map = new HashMap();

map.put("contextPath", re.getContextPath());

return map;

}

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

#head-image{

height:75px;

margin-bottom:0;

background-image:url(../images/banner-graphic.png);

}

【spring】ApplicationListener傳遞參數到頁面(解決靜態+動態資源路徑+靜態文件的緩存控制)

一.相對路徑還是絕對路徑的問題 前端頁面加載資源或者請求的時候到底是使用相對路徑還是絕對路徑,想必大家都很清楚,用的是當然是相對路徑,因為這樣增加了項目的靈活性,不需要經常的改動.那既然是相對路徑就需 ...

JSP、Servlet中的相對路徑和絕對路徑 頁面跳轉問題

轉自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相對路徑和絕對路徑 前提:假設你的Http地址為 ...

修改vue中的掛載頁面(index.html)的路徑

修改vue中的掛載頁面(index.html)的路徑 2019年03月30日 12:07:12?VegasLemon?閱讀數 501 ? ?版權聲明:本文為博主原創文章,未經博主允許不得轉載. htt ...

Servlet -- 跳轉到頁面后的絕對路徑與相對路徑的問題

我們在使用servlet或其它框架,從后臺跳轉到視圖層的時候.常會遇到這種情況,CSS和JS文件失效了,可是假設通過網址直接訪問JSP是沒問題的. 這就是由于絕對路徑和相對路徑導致的. 絕對路徑.就是 ...

用node.js express設置路徑后 子路徑下的頁面訪問靜態資源路徑出問題

在routes/news_mian.js 設置了訪問news_main.html 的路徑 '/',通知設置一個訪問news-page.html的子路徑'/newspage'子路徑.但是在訪問loacl ...

web項目中，視圖層中關于相對路徑和絕對路徑

1.在jfinal項目中 因為一直使用的jfinal,沒感覺路徑問題. 舉個栗子,項目名字叫做test.訪問一個Controller的映射為/user/add.這樣,在瀏覽器地址欄直接:localho ...

Java獲取路徑方法&相對路徑讀取xml文件方法

(1).request.getRealPath("/");//不推薦使用獲取工程的根路徑?(2).request.getRealPath(request.getRequestURI ...

struts/Servlet，action轉到jsp后，路徑問題(struts2，jsp路徑，action路徑，action跳轉，相對路徑，絕對路徑)

問題:使用struts2,如何處理action的路徑?還有,在action轉到的jsp中,如何寫js,css,圖 片的路徑?(例如訪問 http://localhost/project/listUse ...

【轉】JSP中的相對路徑和絕對路徑

1.首先明確兩個概念: 服務器路徑:形如:http://192.168.0.1/的路徑 Web應用路徑:形如:http://192.168.0.1/yourwebapp的路徑 2.關于相對路徑與絕對路 ...

[置頂] asp.net(c#)中相對路徑(虛擬路徑)和物理磁盤路徑的轉換

物理路徑就是磁盤路徑,也就是說是在磁盤上的位置,虛擬路徑也就是web頁面上的路徑,是相對于應用程序而言的 /// /// 將物理路徑轉換成相對路徑 ///

隨機推薦

Oracle常用語法

Oracle常用語句語法匯總 Oracle10g 1 第一章Oracle命令 a) 系統管理員連接 conn */* as sysdba b) 查詢當前用戶 show user c) 創建新用戶 cr ...

Linux命令lsb_release：查看當前系統的發行版信息

Linux里的lsb_release命令用來查看當前系統的發行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...

oracle中查詢某張表都被哪些表參照了

起因: 系統測試的時候發現如果某條記錄已經被引用了,這個時候刪除這條記錄會引起數據不一致,系統會報錯.比如警員信息,在考勤記錄表里會引用警員ID,如果考勤記錄表中已經存在這個警員ID了,這時從警員表中 ...

[轉]ionic項目之上傳下載數據

本文轉自:http://blog.csdn.net/superjunjin/article/details/44158567 一,首先是上傳數據 記得在angularjs的controller中注入$ ...

詳細解析 JavaScript 獲取元素的坐標

引言 最近突然看到了有關圖片懶加載的問題,大致意思就是初始狀態下頁面只加載瀏覽器可視區域的圖片,剩余圖片在當瀏覽器可視區域滾動到其位置時才開始加載.貌似現在許多大型網站都有實現懶加載,所以我便就此問題 ...

移動端設備中1px適配

方式1:偽類+transform實現,主要用transform中的scale縮放,縮放默認中心點是以x,y軸的50%處,因此需要用transform-origin調整中心點 html代碼:

JS -- serializeJSON

http://www.cnblogs.com/linzenews/p/7065050.html

前端框架VUE

Vue Vue近幾年來特別的受關注,三年前的時候angularJS霸占前端JS框架市場很長時間,接著react框架橫空出世,因為它有一個特性是虛擬DOM,從性能上碾軋angularJS,這個時候,vu ...

LeetCode 4.反轉整數

給定一個 32 位有符號整數,將整數中的數字進行反轉. 示例?1: 輸入: 123 輸出: 321 ?示例 2: 輸入: -123 輸出: -321 示例 3: 輸入: 120 輸出: 21 注意: ...

總結

以上是生活随笔為你收集整理的html相对路径载入页面,html页面的绝对路径和相对路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。