在用springmvc架構(gòu)開(kāi)發(fā)網(wǎng)站的過(guò)程中，離不開(kāi)開(kāi)發(fā)前臺(tái)html頁(yè)面，html經(jīng)常需要使用本地相關(guān)的資源，如：圖片，js，css等，一般情況下，我們可以通過(guò)使用相對(duì)路徑的方式來(lái)對(duì)這些資源進(jìn)行指向和訪問(wèn)，如：

如上圖的代碼，可以用瀏覽器直接打開(kāi)此處的代碼，banner-graphic.png圖片也能夠正常顯示在頁(yè)面上，但是，在啟動(dòng)服務(wù)器時(shí)，在瀏覽器中打開(kāi)此文件的時(shí)候，圖片并不會(huì)顯示。

本系統(tǒng)使用mustache來(lái)完成頁(yè)面的渲染，具體的viewresolver配置如下：

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

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

而此文件中的背景圖片引用為”background-image:../../images/banner-graphic.png“，圖片地址自動(dòng)變?yōu)閔ttp://localhost:8080/images/banner-graphic.png，顯然無(wú)法顯示圖像，只有圖片為

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

1.使用一個(gè)變量來(lái)存放服務(wù)器的路徑，如：contextPath,

public Map newModel(HttpServletRequest re) {

Map map = new HashMap();

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

return map;

}

2.這個(gè)變量已經(jīng)包含了服務(wù)器的根地址，所有的html頁(yè)面可以使用這個(gè)統(tǒng)一的根地址指向，也就是webapp目錄，于是所有的js，css文件就可以有唯一的定位，如：指向的就是webapp/styles/login.css文件，{{contextPath}}可以由controller內(nèi)傳遞出來(lái)的值解析，并且css內(nèi)部的圖像引用就可以自由的使用相對(duì)路徑而不會(huì)出現(xiàn)任何報(bào)錯(cuò)，實(shí)例css文件：

#head-image{

height:75px;

margin-bottom:0;

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

}

【spring】ApplicationListener傳遞參數(shù)到頁(yè)面(解決靜態(tài)+動(dòng)態(tài)資源路徑+靜態(tài)文件的緩存控制)

一.相對(duì)路徑還是絕對(duì)路徑的問(wèn)題 前端頁(yè)面加載資源或者請(qǐng)求的時(shí)候到底是使用相對(duì)路徑還是絕對(duì)路徑,想必大家都很清楚,用的是當(dāng)然是相對(duì)路徑,因?yàn)檫@樣增加了項(xiàng)目的靈活性,不需要經(jīng)常的改動(dòng).那既然是相對(duì)路徑就需 ...

JSP、Servlet中的相對(duì)路徑和絕對(duì)路徑 頁(yè)面跳轉(zhuǎn)問(wèn)題

轉(zhuǎn)自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相對(duì)路徑和絕對(duì)路徑 前提:假設(shè)你的Http地址為 ...

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

修改vue中的掛載頁(yè)面(index.html)的路徑 2019年03月30日 12:07:12?VegasLemon?閱讀數(shù) 501 ? ?版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載. htt ...

Servlet -- 跳轉(zhuǎn)到頁(yè)面后的絕對(duì)路徑與相對(duì)路徑的問(wèn)題

我們?cè)谑褂胹ervlet或其它框架,從后臺(tái)跳轉(zhuǎn)到視圖層的時(shí)候.常會(huì)遇到這種情況,CSS和JS文件失效了,可是假設(shè)通過(guò)網(wǎng)址直接訪問(wèn)JSP是沒(méi)問(wèn)題的. 這就是由于絕對(duì)路徑和相對(duì)路徑導(dǎo)致的. 絕對(duì)路徑.就是 ...

用node.js express設(shè)置路徑后 子路徑下的頁(yè)面訪問(wèn)靜態(tài)資源路徑出問(wèn)題

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

web項(xiàng)目中，視圖層中關(guān)于相對(duì)路徑和絕對(duì)路徑

1.在jfinal項(xiàng)目中 因?yàn)橐恢笔褂玫膉final,沒(méi)感覺(jué)路徑問(wèn)題. 舉個(gè)栗子,項(xiàng)目名字叫做test.訪問(wèn)一個(gè)Controller的映射為/user/add.這樣,在瀏覽器地址欄直接:localho ...

Java獲取路徑方法&相對(duì)路徑讀取xml文件方法

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

struts/Servlet，action轉(zhuǎn)到j(luò)sp后，路徑問(wèn)題(struts2，jsp路徑，action路徑，action跳轉(zhuǎn)，相對(duì)路徑，絕對(duì)路徑)

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

【轉(zhuǎn)】JSP中的相對(duì)路徑和絕對(duì)路徑

1.首先明確兩個(gè)概念: 服務(wù)器路徑:形如:http://192.168.0.1/的路徑 Web應(yīng)用路徑:形如:http://192.168.0.1/yourwebapp的路徑 2.關(guān)于相對(duì)路徑與絕對(duì)路 ...

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

物理路徑就是磁盤路徑,也就是說(shuō)是在磁盤上的位置,虛擬路徑也就是web頁(yè)面上的路徑,是相對(duì)于應(yīng)用程序而言的 /// /// 將物理路徑轉(zhuǎn)換成相對(duì)路徑 ///

隨機(jī)推薦

Oracle常用語(yǔ)法

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

Linux命令lsb_release：查看當(dāng)前系統(tǒng)的發(fā)行版信息

Linux里的lsb_release命令用來(lái)查看當(dāng)前系統(tǒng)的發(fā)行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...

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

起因: 系統(tǒng)測(cè)試的時(shí)候發(fā)現(xiàn)如果某條記錄已經(jīng)被引用了,這個(gè)時(shí)候刪除這條記錄會(huì)引起數(shù)據(jù)不一致,系統(tǒng)會(huì)報(bào)錯(cuò).比如警員信息,在考勤記錄表里會(huì)引用警員ID,如果考勤記錄表中已經(jīng)存在這個(gè)警員ID了,這時(shí)從警員表中 ...

[轉(zhuǎn)]ionic項(xiàng)目之上傳下載數(shù)據(jù)

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

詳細(xì)解析 JavaScript 獲取元素的坐標(biāo)

引言 最近突然看到了有關(guān)圖片懶加載的問(wèn)題,大致意思就是初始狀態(tài)下頁(yè)面只加載瀏覽器可視區(qū)域的圖片,剩余圖片在當(dāng)瀏覽器可視區(qū)域滾動(dòng)到其位置時(shí)才開(kāi)始加載.貌似現(xiàn)在許多大型網(wǎng)站都有實(shí)現(xiàn)懶加載,所以我便就此問(wèn)題 ...

移動(dòng)端設(shè)備中1px適配

方式1:偽類+transform實(shí)現(xiàn),主要用transform中的scale縮放,縮放默認(rèn)中心點(diǎn)是以x,y軸的50%處,因此需要用transform-origin調(diào)整中心點(diǎn) html代碼:

JS -- serializeJSON

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

前端框架VUE

Vue Vue近幾年來(lái)特別的受關(guān)注,三年前的時(shí)候angularJS霸占前端JS框架市場(chǎng)很長(zhǎng)時(shí)間,接著react框架橫空出世,因?yàn)樗幸粋€(gè)特性是虛擬DOM,從性能上碾軋angularJS,這個(gè)時(shí)候,vu ...

LeetCode 4.反轉(zhuǎn)整數(shù)

給定一個(gè) 32 位有符號(hào)整數(shù),將整數(shù)中的數(shù)字進(jìn)行反轉(zhuǎn). 示例?1: 輸入: 123 輸出: 321 ?示例 2: 輸入: -123 輸出: -321 示例 3: 輸入: 120 輸出: 21 注意: ...

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。