69

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?

vvvvv
  • 25,404
  • 19
  • 49
  • 81
Alireza
  • 6,497
  • 13
  • 59
  • 132

2 Answers2

137

/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.

vvvvv
  • 25,404
  • 19
  • 49
  • 81
Rudi Visser
  • 21,350
  • 5
  • 71
  • 97
  • I have changed it to: assets/jquery-1.7.1.min.js but no success. I've got 404 not found as I said. – Alireza Jul 17 '12 at 11:02
  • @phpGeek Looking in Firebug (or F12 or whatever else), what URL is it attempting to request now? – Rudi Visser Jul 17 '12 at 11:03
  • See the `EDIT` part of my question. – Alireza Jul 17 '12 at 11:05
  • 2
    @phpGeek I have added (tested) example code which shows this working. Add a trailing `/` to the `href`, you still need to remove the `/` before assets too. – Rudi Visser Jul 17 '12 at 11:07
  • 1
    Something doesn't make sense here. Although paths starting with `/` are *absolute*, URLs containing such paths are actually called *relative URLs*. According to the specification, you should be able to resolve *relative URLs* against the `` tag. A `relative URL` as defined by https://tools.ietf.org/html/rfc1808 is simply a URL lacking a URL scheme component. – Gili Mar 14 '14 at 15:50
  • @Gili hence my very clear `*`. You can resolve relative URLs against the base, but not "absolute" (meaning with a `/` in this context). – Rudi Visser Mar 17 '14 at 11:22
  • @Gili Depending on the type of the path a relative URL is relative to either the path (`foo.html`), the location (`/foo`) or even only the scheme ( `//foo.com`) of an absolute URL. Relative URLs having an absolute path ARE resolved against an explicit base URL, but you would only note a difference if that base URL has a domain or scheme different from that of the URL of the current document. – a better oliver Apr 29 '16 at 08:50
  • Thought this would be helpful .. i was using a base href for my angular app and had the image with a leading slash and it would not load. so removing it worked src="/assets/img/CSC_arms.png" – Ricardo Saracino Sep 11 '18 at 12:36
  • 2
    "You will also need to add a trailing / to the end of the href" -> that is what solved my issue! – vvvvv Mar 17 '20 at 12:59
  • @RudiVisser what is the significance of trailing "/" ? I got a similar scenario and was searching everywhere for this. :) – Abdu Manas C A May 01 '21 at 16:45
18

Try having your base tag like:

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

and your script tag like:

<script src="assets/jquery-1.7.1.min.js">
techfoobar
  • 65,616
  • 14
  • 114
  • 135