相对路径情况1:web/index.html中引入web/static/img/logo.png
访问index.html的url为 : http://localhost:8080/web03_war_exploded/index.html
当前资源为 : index.html
当前资源的所在路径为 : http://localhost:8080/web03_war_exploded/
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
index.html中定义的了 : <img src="static/img/logo.png"/>
寻找方式就是在当前资源所在路径(http://localhost:8080/web03_war_exploded/)后拼接src属性值(static/img/logo.png),正好是目标资源正常获取的url(http://localhost:8080/web03_war_exploded/static/img/logo.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="static/img/logo.png">
</body>
</html>
?
相对路径情况2:web/a/b/c/test.html中引入web/static/img/logo.png
访问test.html的url为 : http://localhost:8080/web03_war_exploded/a/b/c/test.html
当前资源为 : test.html
当前资源的所在路径为 : http://localhost:8080/web03_war_exploded/a/b/c/
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
test.html中定义的了 : <img src="../../../static/img/logo.png"/>
寻找方式就是在当前资源所在路径(http://localhost:8080/web03_war_exploded/a/b/c/)后拼接src属性值(../../../static/img/logo.png),其中 ../可以抵消一层路径,正好是目标资源正常获取的url(http://localhost:8080/web03_war_exploded/static/img/logo.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- ../代表上一层路径 -->
<img src="../../../static/img/logo.png">
</body>
</html>
?
相对路径情况3:web/WEB-INF/views/view1.html中引入web/static/img/logo.png
view1.html在WEB-INF下,需要通过Servlet请求转发获得
@WebServlet("/view1Servlet")
public class View1Servlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher requestDispatcher = req.getRequestDispatcher("WEB-INF/views/view1.html");
requestDispatcher.forward(req,resp);
}
}
?
访问view1.html的url为 : http://localhost:8080/web03_war_exploded/view1Servlet
当前资源为 : view1Servlet
当前资源的所在路径为 : http://localhost:8080/web03_war_exploded/
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
view1.html中定义的了 : <img src="static/img/logo.png"/>
寻找方式就是在当前资源所在路径(http://localhost:8080/web03_war_exploded/)后拼接src属性值(static/img/logo.png),正好是目标资源正常获取的url(http://localhost:8080/web03_war_exploded/static/img/logo.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="static/img/logo.png">
</body>
</html>
?
绝对路径情况1:web/index.html中引入web/static/img/logo.png
访问index.html的url为 : http://localhost:8080/web03_war_exploded/index.html
绝对路径的基准路径为 : http://localhost:8080
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
index.html中定义的了 : <img src="/web03_war_exploded/static/img/logo.png"/>
寻找方式就是在基准路径(http://localhost:8080)后面拼接src属性值(/web03_war_exploded/static/img/logo.png),得到的正是目标资源访问的正确路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 绝对路径写法 -->
<img src="/web03_war_exploded/static/img/logo.png">
</body>
</html>
绝对路径情况2:web/a/b/c/test.html中引入web/static/img/logo.png
访问test.html的url为 : http://localhost:8080/web03_war_exploded/a/b/c/test.html
绝对路径的基准路径为 : http://localhost:8080
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
test.html中定义的了 : <img src="/web03_war_exploded/static/img/logo.png"/>
寻找方式就是在基准路径(http://localhost:8080)后面拼接src属性值(/web03_war_exploded/static/img/logo.png),得到的正是目标资源访问的正确路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 绝对路径写法 -->
<img src="/web03_war_exploded/static/img/logo.png">
</body>
</html>
绝对路径情况3:web/WEB-INF/views/view1.html中引入web/static/img/logo.png
view1.html在WEB-INF下,需要通过Servlet请求转发获得
@WebServlet("/view1Servlet")
public class View1Servlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
RequestDispatcher requestDispatcher = req.getRequestDispatcher("WEB-INF/views/view1.html");
requestDispatcher.forward(req,resp);
}
}
访问view1.html的url为 : http://localhost:8080/web03_war_exploded/view1Servlet
绝对路径的基准路径为 : http://localhost:8080
要获取的目标资源url为 : http://localhost:8080/web03_war_exploded/static/img/logo.png
view1.html中定义的了 : <img src="/web03_war_exploded/static/img/logo.png"/>
寻找方式就是在基准路径(http://localhost:8080)后面拼接src属性值(/static/img/logo.png),得到的正是目标资源访问的正确路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="/web03_war_exploded/static/img/logo.png">
</body>
</html>
base标签定义页面相对路径公共前缀
base 标签定义在head标签中,用于定义相对路径的公共前缀
base 标签定义的公共前缀只在相对路径上有效,绝对路径中无效
如果相对路径开头有 ./ 或者../修饰,则base标签对该路径同样无效
index.html 和a/b/c/test.html 以及view1Servlet 中的路径处理
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--定义相对路径的公共前缀,将相对路径转化成了绝对路径-->
<base href="/web03_war_exploded/">
</head>
<body>
<img src="static/img/logo.png">
</body>
</html>
项目上下文路径变化问题
通过 base标签虽然解决了相对路径转绝对路径问题,但是base中定义的是项目的上下文路径
项目的上下文路径是可以随意变化的
一旦项目的上下文路径发生变化,所有base标签中的路径都需要改
解决方案
将项目的上下文路径进行缺省设置,设置为 /,所有的绝对路径中就不必填写项目的上下文了,直接就是/开头即可