在用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);
}

html页面的绝对路径和相对路径的更多相关文章

  1. 【spring】ApplicationListener传递参数到页面(解决静态+动态资源路径+静态文件的缓存控制)

    一.相对路径还是绝对路径的问题 前端页面加载资源或者请求的时候到底是使用相对路径还是绝对路径,想必大家都很清楚,用的是当然是相对路径,因为这样增加了项目的灵活性,不需要经常的改动.那既然是相对路径就需 ...

  2. JSP、Servlet中的相对路径和绝对路径 页面跳转问题

    转自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...

  3. 修改vue中的挂载页面(index.html)的路径

    修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501    版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...

  4. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  5. Servlet -- 跳转到页面后的绝对路径与相对路径的问题

    我们在使用servlet或其它框架,从后台跳转到视图层的时候.常会遇到这种情况,CSS和JS文件失效了,可是假设通过网址直接訪问JSP是没问题的. 这就是由于绝对路径和相对路径导致的. 绝对路径.就是 ...

  6. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  7. web项目中,视图层中关于相对路径和绝对路径

    1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...

  8. Java获取路径方法&相对路径读取xml文件方法

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...

  9. struts/Servlet,action转到jsp后,路径问题(struts2,jsp路径,action路径,action跳转,相对路径,绝对路径)

    问题:使用struts2,如何处理action的路径?还有,在action转到的jsp中,如何写js,css,图 片的路径?(例如访问 http://localhost/project/listUse ...

  10. 【转】JSP中的相对路径和绝对路径

    1.首先明确两个概念: 服务器路径:形如:http://192.168.0.1/的路径 Web应用路径:形如:http://192.168.0.1/yourwebapp的路径 2.关于相对路径与绝对路 ...

随机推荐

  1. c# web 缓存管理

    using System; using System.Collections; using System.Text.RegularExpressions; using System.Web; usin ...

  2. hdu1016 Prime Ring Problem

    dfs,用全局数组和变量保存并更新当前状态. 答案可以直接在搜索结束时打印,n为奇数时方案数为0. acm.hdu.edu.cn/showproblem.php?pid=1016 #include & ...

  3. ASP.NET使用后台更改前台Style

    首先是后台给前台设置Style属性,设置控件坐标 前台控件: <asp:Label ID = "lblDSRText" Text = "当事人" runa ...

  4. 转载-python学习笔记之常用模块用法分析

    内置模块(不用import就可以直接使用)   常用内置函数   help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像函数一样调用 repr(ob ...

  5. C#中求数组的子数组之和的最大值

    <编程之美>183页,问题2.14——求子数组的字数组之和的最大值.(整数数组) 我开始以为可以从数组中随意抽调元素组成子数组,于是就有了一种想法,把最大的元素抽出来,判断是大于0还是小于 ...

  6. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

  7. WPF中父子窗口的层次关系

    关于子窗体的层级关系总结一下哈,希望能对大家有些帮助 假设有这样两个窗体:RootWindow,SubWindow,在RootWindow中引发某事件而显示SubWindow 1,如果弹出窗体(比如S ...

  8. [C语言](*p)++与 ++(*p)与 *p++ 与 ++*p

    首先亮明个人观点,不要认为这样写都算写的不好,还强调大神一般不写这种代码,可读性不高 其实是你的C语言基础太差,读不懂,大神还真的就是这么写的.可以看看C语言库函数中的一些写法 *P++ :*和++都 ...

  9. UVA 11461 - Square Numbers

    题目:统计区间中的平方数个数. 分析: ... #include <stdio.h> #include <string.h> ]; int main() { int i, a, ...

  10. __NSCFConstantString

    -[__NSCFConstantString size]: unrecognized selector sent to instance 0x53ea70 该错误是在我将NSString类型的参数赋值 ...