在用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中的相对路径和绝对路径 页面跳转问题
转自:/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...
修改vue中的挂载页面(index.html)的路径
修改vue中的挂载页面(index.html)的路径 03月30日 12:07:12VegasLemon阅读数 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项目之上传下载数据
本文转自:/superjunjin/article/details/44158567 一,首先是上传数据 记得在angularjs的controller中注入$ ...
详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
移动端设备中1px适配
方式1:伪类+transform实现,主要用transform中的scale缩放,缩放默认中心点是以x,y轴的50%处,因此需要用transform-origin调整中心点 html代码:
JS -- serializeJSON
/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 注意: ...
