为什么开发人员会在每个相对路径的开始处放置一个正斜杠?

我正在为一个朋友检查一些代码,发现构建站点的开发人员用一个斜杠 /开始每个相对 srchrefinclude

例如:

src="/assets/js/jquery.js"

我从没见过这个。因此,我的问题是,为什么开发人员要在相对路径的开始处放置一个正斜杠 /

33549 次浏览

It's done in order to root the path (making it an absolute path).

It ensures that the path is not relative but read from the root of the site.

This allows one to move a file around and not have to change the links to the different resources.

Using your example:

src="/assets/js/jquery.js"

If the referencing file is in /pages/admin/main.html (for example) using relative paths you would use:

src="../../assets/js/jquery.js"

Suppose you move the file to a child directory. No changes would be needed for with the original rooted path, but the relative one would need to change to:

src="../../../assets/js/jquery.js"

This is to ensure the asset comes from the "root" of the web server.

e.g. Host is www.example.com URL becomes www.example.com/assets/js/jquery.js

I do this with project I want to ensure live on their own virtual host.

The issue really comes down to where those assets are being included. For example if the asset is being included from /help/pages/faq then the developer can be sure the path will work correctly when the site is hosted on a non changing host, e.g. example.com.

The issue of using relative paths, 'assets/js/jquery.js' is that if the assets are included from the /help/pages/faqs then the path becomes relative to that starting point, e.g. /help/pages/faqs/assets/js/jquery.js

Hope that helps

Adding on @Oded's answer, the slash makes the URL absolute.

For example:

/foo/bar/baz.css

This translates to:

http://www.example.com/foo/bar/baz.css

But without the slash, things become a bit different:

foo/bar/baz.css

This tells the browser to look in the current folder (not the root folder) for the directory foo and then the subsequent directories and the file.


Also, take for instance this HTML:

<script type="text/javascript" src="foo.js"></script>

If you move the HTML file into another folder, then the script will not load, as foo.js isn't being moved with the HTML file.

But if you use an absolute URL:

<script type="text/javascript" src="/foo.js"></script>

Then the JS file is loaded EXACTLY from http://www.example.com/foo.js no matter where the HTML file is.

This is a bit off topic, but if there is any chance that your application will ever be served behind a reverse proxy (eg. using apache2 or nginx) under a sub-path, you should try to avoid absolute paths.

For example, if you reference "/style.css" on https://example.com/, and you tried to hide it behind a reverse proxy at https://proxy.example.com/example/, your absolute reference would break. The browser would make the request to "https://proxy.example.com/style.css" when it should have requested "https://proxy.example.com/example/style.css".

Unintentional absolute paths from a leading forward slash are a nightmare for reverse proxies to deal with.