web中src引用文件的路径问题

在编写web应用的时候,难免会在一个文件中引用外部的文件,例如样式表css文件以及一些脚本js文件,这样做的目的无疑是提高代码的复用率。但是在引用文件时,一定要引用正确的文件路径,不然是访问不到相关文件的。

总结一下,一共有如下几种方式引用相关文件:

前提:

相关目录结构:

方法一:使用相对于当前文件(源文件)的相对路径

[html] view plain copy print?

  1. <link type="text/css" rel="stylesheet" href="../styles/main.css" />
  2. <script type="text/javascript" src="../scripts/dtree.js"></script>
<link type="text/css" rel="stylesheet" href="../styles/main.css" />
<script type="text/javascript" src="../scripts/dtree.js"></script>

这样在页面使用http://localhost:8080/MyProject/test.jsp访问test.jsp时就可以引用到dtree.js和main.css。

方法二:使用相对于web工程的相对路径

[html] view plain copy print?

  1. <link type="text/css" rel="stylesheet" href="styles/main.css" />
  2. <script type="text/javascript" src="scripts/dtree.js"></script>
<link type="text/css" rel="stylesheet" href="styles/main.css" />
<script type="text/javascript" src="scripts/dtree.js"></script>

但是如上两种方法都有其瓶颈,对于方法一中的相对使用相对于于jsp页面的相对路径的这种方式,如果我们是设置action跳转到test.jsp页面,那么这种使用相对路径的方式就引用不到了。例如我们当访问http://localhost:8080/MyProject/main.do的时候,页面跳转到test.jsp页面,如果使用方法1,就引用不到了。如果使用方法2这种方式引用,如果直接访问http://localhost:8080/MyProject/test.jsp,是引用不到的。

那么有没有一种两全其美的方法呢,答案是肯定的,也就是我们的方法三:使用web工程的绝对路径

[html] view plain copy print?

  1. <link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />
  2. <script type="text/javascript" src="/MyProject/scripts/dtree.js"></script>
<link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />
<script type="text/javascript" src="/MyProject/scripts/dtree.js"></script>

这样,不管是通过http://localhost:8080/MyProject/main.do跳转访问test.jsp还是直接访问http://localhost:8080/MyProject/test.jsp,都可以成功引用。 注意:如果我们在部署Web应用时,没有设置Context Root(一般情况下配置为工程名),也就是IP和端口后面不带应用名,如http://localhost:8080/main.do和http://localhost:8080/test.jsp,这种情况在引用时就不能带工程名了,应该这样:

[html] view plain copy print?

  1. <link type="text/css" rel="stylesheet" href="/styles/main.css" />
  2. <script type="text/javascript" src="/scripts/dtree.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/main.css" />
<script type="text/javascript" src="/scripts/dtree.js"></script>
时间: 2024-10-29 06:58:10

web中src引用文件的路径问题的相关文章

web前端入门到实战:HTML中img标签的src属性绝对路径问题解决办法,完全解决!

HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,tomcat,html,img,src,java 注意:不需要寻找tomcat真实路径下的server.xml去修改,这个地方不需要修改. 解决办法:1.在eclipse中找到你的项目发布的tomcat服务器,然后找到左侧Servers下对应的你的Tomcat服务器中的server.xml文件,如下图所示:

java web中servlet、jsp、html 互相访问的路径问题。

在java web种经常出现 404找不到网页的错误,究其原因,一般是访问的路径不对. java web中的路径使用按我的分法可以分两种情况,当然啦两者使用相对路径是一致,本文只说绝对路径. 情况一.指向外部的web组件和本身关系不大的,这一类的有:html中使用路径的标签,比如<a>标签中的href;servlet和jsp中的重定向sendRedirect(path); 情况二.指向内部的web组件和本身有关系的,这一类我暂时看到的有:servlet或者jsp的转发 假设在myapp项目下有

web中的相对路径与绝对路径

1.什么叫绝对路径 相对于WEB应用的跟路径的路径,即任何路径都必须带上contentPath. 2.javaEE中的/代表什么 代表WEB应用的跟路径(需交由Servlet容器处理) 请求转发时. web.xml文件中映射servlet访问路径 各种定制标签 代表站点的跟路径(交由浏览器来处理) 超链接 表达式中的action 做请求重定向的时候

web中的CSS、Xpath等路径定位方法学习

今天不到八点就到公司了,来的比较早,趁着有点时间,总结下web中的CSS.Xpath等路径定位定位的方式吧! 简单的介绍下xpath和css的定位 理论知识就不罗列了 还是利用博客园的首页.直接附上代码: 这个是xpath 1 #!/usr/bin/env python 2 # -*- coding: utf_8 -*- 3 4 from learn_webdriver import Webdriver 5 from selenium import webdriver 6 from seleni

Web中路径问题

如果在web项目中需要使用路径,如:转发.重定向还有超链接等. 原则:"一切web路径以/开始" 那么/的路径一定是相对路径,那么/到底代表哪一个相对路径是需要智慧的. 如果该路径是给服务器使用的,那么/代表当前网站的根目录. 如果该路径是给浏览器使用的,那么/代表当前Tomcat的webapps目录. 举例: <a href="/day07/demo1"></a> <form action="/day07/regist&qu

获取web项目中的webroot目录路径

备忘,一段代码: @Override public void init(FilterConfig arg0) throws ServletException { // TODO Auto-generated method stub logger.info("======begin web context===="); ServletContext context=arg0.getServletContext(); String webroot=context.getContextPat

java web中路径问题。

转自:http://blog.csdn.net/liang5630/article/details/38474543 如有侵权,请及时联系本人及时删除 在java web种经常出现 404找不到网页的错误,究其原因,一般是访问的路径不对. java web中的路径使用按我的分法可以分两种情况,当然啦两者使用相对路径是一致,本文只说绝对路径. 情况一.指向外部的web组件和本身关系不大的,这一类的有:html中使用路径的标签,比如<a>标签中的href;servlet和jsp中的重定向sendR

TFS中Web管理编辑器插入图片路径问题

在使用TFS的Web管理,新建工作时在编辑器中添加附件,成功之后在编辑器中经常无法正常显示(没有使用机器名访问TFS服务器.或者跟服务器不同的域或者使用外网地址访问等). 首先找到: Microsoft Team Foundation Server 12.0\Application Tier\Web Services\web.config文件中的 <compilation defaultLanguage="c#" explicit="true" debug=&

PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时才解决. /*** 图片地址替换成压缩URL* @param string $content 内容* @param string $suffix 后缀*/function get_img_thumb_url($content="",$suffix="!c550x260.jpg&q