Search code examples
htmltagsradix

Why base tag does not work for relative paths?


I have a <base> tag as below in <head> section of the page:

<base href="http://localhost/framework">

And a script as below which is relative (of course after <base>):

<script src="/assets/jquery-1.7.1.min.js">

But when I open jQuery from firebug it shows:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body> 
Blah Blah Blah....

When I use the below link it's OK though:

<script src="http://localhost/framework/assets/jquery-1.7.1.min.js">  

I looked for an answer everywhere, but it seems I'm doing my job right! So what is the problem?


Solution

  • /assets/jquery-1.7.1.min.js is not relative but absolute*, the / takes it to the root even with a base tag.

    If you remove that /, it should make it relative off the current path, which, when a base tag is present would be http://localhost/framework/.

    Note: You will also need to add a trailing / to the end of the href, to indicate that it's a folder.

    Full working example:

    <!doctype html>
    <html>
    <head>
    <base href="/test/" />
    <script src="assets/test.js"></script>
    <body>
    hi
    </body>
    </html>
    

    * Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.