【web前端】相对路径和绝对路径详解

最新推荐文章于 2024-04-04 21:46:14 发布

Tomorrow_xun

最新推荐文章于 2024-04-04 21:46:14 发布

阅读量3.5k

点赞数 1

文章标签：服务器 javascript 前端

本文链接：https://blog.csdn.net/m0_69538833/article/details/126794414

版权

一、绝对路径

绝对路径：

绝对：真真地存在你电脑上的实际路径。比如你的window系统的C盘下有个ABC文件夹，ABC文件夹下有个file文件。那么绝对路径：C:\ABC\file

二、使用绝对路径的缺点

事实上，在编程时，很少会使用绝对路径，比如你在Window系统上写了个XX系统，需要使用“E:\book\网页布局\1.jpg”来指定背景图片的位置，在自己的计算机上使用绝对路径浏览可能会一切正常，但是将系统代码文件和背景图文件上传到Web服务器(常常是Linux系统，可能不存在C,D,E盘)上部署系统时浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个系统并没有放在Web服务器的E盘，有可能是D盘或H盘。甚至可能web服务器根本就没有E盘，即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\1.jpg”这个目录，因此在浏览网页时会找不到该背景图，然后不会显示图片。

三、相对路径

为了避免这种情况的发生，通常在网页系统上指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，XX系统里引用了“1.jpg”图片，我们上传系统代码时，将XX系统代码和1.jpg放在同一个文件夹上传到web服务器，由于“1.jpg”图片相对于XX系统代码文件来说，是在同一个目录的，那么要在XX系统的代码文件里使用该1.jpg图后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。这里XX系统需要使用1.jpg时用的相对路径就为： background = " 1.jpg " 即可

再举一个例子，假设某个系统的“index..html”文件所在目录为“E:\book\网页布局\”，而“bg.jpg”图片所在目录为“E:\book\网页布局\img下”，那么“bg.jpg”图片相对于“index.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该为：
<body background="img/bg.jpg">
注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。