当前位置： 首页 > article >正文

前端和后端的相对路径和绝对路径

article 2024/11/17 18:29:42

1. 相对路径访问图片

  • test.html 位于 web/a/b/c/ 目录中：

    • 若要访问 static/img/ 文件夹中的图片（假设图片名为 image.png），相对路径应该是： 
      <img src="../../../static/img/image.png" alt="Image">
      这里 ../../../ 用于返回到 web 目录，再进入 static/img/。

  • view.html 位于 WEB-INF/views/ 目录中：

    • WEB-INF 下的文件不能被直接访问，但假设你使用了一些方式（如通过 Servlet 渲染）来显示它，可以通过以下相对路径引用图片： 
      <img src="../../static/img/image.png" alt="Image">
      ../../ 用来从 WEB-INF/views/ 跳出两层，回到 web，然后进入 static/img/。

  • index.html 或 indix.html 位于 web/ 根目录：

    • 若要访问图片，可以使用相对路径： 
      <img src="static/img/image.png" alt="Image">

2. 绝对路径访问图片

无论 HTML 文件在哪个目录，绝对路径始终从 Web 应用的根目录（即 web/）开始。假设你的应用部署在服务器的根路径 /，可以使用以下绝对路径：

<img src="/static/img/image.png" alt="Image">

这种方式确保无论 HTML 文件放置在项目的哪个位置，都能够从根目录开始正确访问 static/img/image.png。

总结：

  • 相对路径 是基于当前 HTML 文件的层次位置，决定路径中 ../ 的使用次数。
  • 绝对路径 则更为稳定，直接从应用的根目录开始引用，使用 /static/img/image.png。

绝对路径的缺点： 

绝对路径要补充项目的上下文，而项目上下文是可以改变的
1. <base> 标签（不完美的解决办法）

  • <base> 标签允许你定义相对路径的公共前缀，一旦定义，所有相对路径（如图片、CSS、JS 等）都会基于这个前缀进行解析。

  • 在你给出的例子中，<base href="/web03_war_exploded/"> 将 /web03_war_exploded/ 作为所有相对路径的基准前缀。
2. 适用场景
  • 相对路径：<base> 标签对相对路径有效，会将其转换为基于该前缀的绝对路径。例如，如果有一个相对路径 static/img/logo.png，那么完整路径将变为 /web03_war_exploded/static/img/logo.png。
  • 绝对路径：<base> 对绝对路径无效。如果你直接使用绝对路径，如 /static/img/logo.png，它会忽略 <base> 定义的前缀。
3. 注意事项
  • <base> 标签必须放置在 <head> 标签内，并且在同一 HTML 文档中只能定义一个 <base> 标签。
  • 如果路径以 ./ 或 ../ 开头，<base> 标签仍会生效，将相对路径基于指定的前缀。

更简便的方法：

 

所有的HTML访问img的代码如下：

 后端 

1. Servlet 重定向 (sendRedirect)

通过 ServletA 来访问 test.html 文件的流程 

1. 相对路径的使用

  • 在 ServletA 中，通过 resp.sendRedirect("../../../a/b/c/test.html"); 实现重定向。这个路径是相对于当前 ServletA 所在的路径 (/web03_war_exploded/x/y/z/servletA)。
    • ../../../ 表示向上跳三层目录，正好跳到根路径 /web03_war_exploded/，然后进入 a/b/c/test.html，最终构成的完整 URL 是：

      http://localhost:8080/web03_war_exploded/a/b/c/test.html

2. 绝对路径的使用

  • 你可以直接使用绝对路径进行重定向，如：

    resp.sendRedirect("/web03_war_exploded/a/b/c/test.html");

    这种方式避免了相对路径中的复杂跳转，直接从服务器根路径开始访问文件。

  • 绝对路径中需要填写项目上下文路径，但是上下文路径是变换的所以需要用到getContextPath();

  • 通过获取项目上下文路径： 如果项目上下文路径是动态的（如部署在不同的服务器或子路径下），推荐通过 ServletContext 获取上下文路径，确保路径的动态适应性：

    resp.sendRedirect(request.getContextPath() + "/a/b/c/test.html");

    这里的 request.getContextPath() 会动态返回当前项目的上下文路径，避免硬编码路径不一致的问题。

    //绝对路径中,要写项目上下文路径
//resp.sendRedirect("/web03_war_exploded/a/b/c/test.html");
// 通过ServletContext对象动态获取项目上下文路径
//resp.sendRedirect(getServletContext().getContextPath()+"/a/b/c/test.html");
// 缺省项目上下文路径时,直接以/开头即可
resp.sendRedirect("/a/b/c/test.html");

总结：

  • 相对路径：相对路径的好处是与当前资源位置相关，但可能会因为层级跳转复杂而不易维护，特别是当文件目录结构较深时，容易出错。

  • 绝对路径：绝对路径较为清晰，但需要指定项目的上下文路径，若项目迁移或部署在不同上下文路径下（如 /web03_war_exploded/ 变为 /app/），可能需要修改路径。通过 getContextPath() 动态获取上下文路径能有效避免这个问题。

2. 请求转发 (RequestDispatcher)

1. 相对路径写法

  • 当前的请求是通过 ServletB 访问的，其 URL 为：

    http://localhost:8080/web03_war_exploded/x/y/z/servletB

  • ServletB 转发到目标页面 test.html 的相对路径为： 
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("../../../a/b/c/test.html"); 
requestDispatcher.forward(req, resp);
@WebServlet("/x/y/z/servletA")
public class ServletA extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
        // 相对路径重定向到test.html
        resp.sendRedirect("../../../a/b/c/test.html");
   }
}
  • 解释相对路径：
    • ../../../ 表示向上跳出三个层级，从 /x/y/z/ 跳回到根路径 /web03_war_exploded/，然后再进入 a/b/c/test.html。
    • 最终路径为：

      http://localhost:8080/web03_war_exploded/a/b/c/test.html

2. 绝对路径写法

  • 另一种方式是使用绝对路径，不需要依赖项目上下文路径而重定向的绝对路径需要依赖项目上下文路径： 
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("/a/b/c/test.html"); 
requestDispatcher.forward(req, resp);
  • 这里的 /a/b/c/test.html 是绝对路径，直接从服务器的根路径开始解析，无需处理层级跳转的问题。这种写法避免了相对路径复杂的目录跳转问题。
@WebServlet("/x/y/servletB")
public class ServletB extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException {
        RequestDispatcher requestDispatcher =
req.getRequestDispatcher("../../a/b/c/test.html");
        requestDispatcher.forward(req,resp);
   }
}

3. 总结

  • 相对路径：适用于基于当前资源位置进行跳转，需要根据当前请求的位置进行目录层级的跳转。
  • 绝对路径：从项目的根路径开始定义目标资源路径，推荐使用绝对路径来减少复杂性，特别是当资源路径固定时。
  • 请求转发：不同于重定向，请求转发 不会更改客户端的 URL 地址，操作完全在服务器端进行，浏览器不会察觉 URL 变化。
  • 另一种方式是使用绝对路径，不需要依赖项目上下文路径： 
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("/a/b/c/test.html"); 
requestDispatcher.forward(req, resp);
  • 这里的 /a/b/c/test.html 是绝对路径，直接从服务器的根路径开始解析，无需处理层级跳转的问题。这种写法避免了相对路径复杂的目录跳转问题。

目标资源内相对路径处理

  • 此时需要注意，请求转发是服务器行为，浏览器不知道，地址栏不变化，相当于我们访问test.html 的路径为http://localhost:8080/web03_war_exploded/x/y/servletB；
  • 那么此时 test.html资源的所在路径就是http://localhost:8080/web03_war_exploded/x/y/所以 test.html中相对路径要基于该路径编写，如果使用绝对路径则不用考虑；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
 当前资源路径是     http://localhost:8080/web03_war_exploded/x/y/servletB
        当前资源所在路径是 http://localhost:8080/web03_war_exploded/x/y/
        目标资源路径=所在资源路径+src属性值
 http://localhost:8080/web03_war_exploded/x/y/../../static/img/logo.png
        http://localhost:8080/web03_war_exploded/static/img/logo.png
 得到目标路径正是目标资源的访问路径 
    -->
<img src="../../static/img/logo.png">
</body>
</html>


http://www.kler.cn/a/320959.html

相关文章：

  • 购物车demo全代码-对接支付宝沙箱环境
  • ADS项目笔记 1. 低噪声放大器LNA天线一体化设计
  • lua实现雪花算法
  • 「Mac玩转仓颉内测版5」入门篇5 - Cangjie控制结构（上）
  • java版嘎嘎快充汽车单车充电系统源码系统jeecgboot
  • MuMu模拟器安卓12安装Xposed 框架
  • 自动化测试常用函数：弹窗、等待、导航、上传与参数设置
  • oracle sql分组(group，根据多个内容分组)在select之后from之前 再进行select查询，复杂子查询的使用
  • 采购管理系统SRM助力电子元器件制造企业构建高效的供应商管理体系
  • JavaSE——lombok、juint单元测试、断言
  • 技术速递｜宣布 Azure Container Apps 上的 Java 体验正式推出
  • java 抽奖程序结合数据库，redis实现
  • golang操作mysql利器-gorm
  • Qt 每日面试题 -4
  • Linux 冯诺依曼体系结构与操作系统概念
  • 『功能项目』按钮的打开关闭功能【73】
  • 【 观测技术红外相机技术】
  • 算法_BFS解决多源最短路问题---持续更新
  • 恶意Bot流量识别分析实践
  • 设计模式实战——开发中常用到的单例模式
  • 预付费计量系统的实例
  • Ubuntu搭建java开发环境
  • element ui实现全局el-dialog可拖拽
  • unxiODBC编程（五）错误处理
  • 服务器为什么会受到网络攻击？
  • Ubuntu下简易安装openjdk8的命令行