解惑頁面中的相對路徑和絕對路徑

寫在前面：
最近作一個先後端結合的項目時，忽然發現本身被頁面中使用的相對路徑搞糊塗了（PS：其實已經不是第一次了。。。以前有一次屢清楚了，但發現又忘記了，瞧我者好記性O(∩_∩)O）。因此我要趁此次好好記一下！

前端開發中使用相對路徑的地方無非就兩處：

• html 文件中引入資源（js、css、img等）

• css 文件中引入背景圖片background-image

那麼，這些相對地址到底相對的是誰，誰，誰 ？？？
之前我曾經傻傻地覺得：「相對路徑在哪裏寫的就相對於誰！」，只能說仍是太年輕。

我作了個簡單的實驗來驗證。

實驗設置

頁面地址爲：http://example.com/beta/test

html 文件中引入資源（js、css、img）時，有些使用的是相對路徑，有些使用的是絕對路徑：

<link rel="stylesheet" href="./index.css">
<script src="/index.js"></script>
<img src="../1.png" alt="圖片">

css 文件中引入背景圖片時，一樣的，有些使用的是相對路徑，有些使用的是絕對路徑：

body{
    background: red;
    background-image: url('./2.png');
}
div{
    width: 200px;
    height: 200px;
    background-color: yellow;
    background-image: url('/3.png');
}

實驗結果

最終查看瀏覽器發出的請求分別爲：

1. http://example.com/beta/index... (html 中引入的 css )

2. http://example.com/index.js (html 中引入的 js )

3. http://example.com/1.png (html 中引入的圖片 )

4. http://example.com/beta/2.png (css 中引入的圖片)

5. http://example.com/3.png ( css 中引入的圖片)

結果分析

從瀏覽器最終發出的請求能夠看出，html 和css 中引用資源時，無論是相對路徑仍是絕對路徑，兩種使用場景下 相對的對象 是不一樣的。

1. html 中引入的資源（包括js、css、img）

   • 相對路徑：相對的是 網頁自己的 URL，即 http://example.com/beta/test

   • 絕對路徑：相對的是 網頁 URL 的根路徑，即 http://example.com

2. css 中引入的資源

   • 相對路徑：相對的是 css 文件自己的 URL，即 http://example.com/beta/index...

   • 絕對路徑：相對的是 網頁 URL 的根路徑，即 http://example.com

結論：
html 中引入資源的相對路徑與 網頁的 URL 有關，而css中則與 css 資源自己 URL 有關。但使用絕對路徑時，無論是在 html 中，仍是css中，都只與 網頁 URL的根路徑有關。