I serve content from a subdirectory on my web server, for example:
http://www.myserver.com/subtree
I notice that the CSS is not rendering correctly, so I look at the source of the HTML file:
<link rel="stylesheet" type="text/css" href="static/stylesheets/style.css"/>
One would expect that browsers such as Chrome or Firefox attempt to find this css at
http://www.myserver.com/subtree/static/stylesheets/style.css
When hovering over the link, I can see that it links me to
http://www.myserver.com/static/stylesheets/style.css
It may be useful to note that I'm using apache's mod_proxy to serve the content from /subtree from another server running on the local machine. However, my reasoning is that the browser doesn't know about this and it looks like the content is coming from myserver.com/subtree so therefore it should look for the resources using the relative path.
What am I missing?
That's to be expected. The browser cannot know that /subtree is a folder (instead, it could also be just a file served as text/html). If you want the browser to include this path fragment in relative path lookups, make sure that it ends with as slash, as in:
http://www.myserver.com/subtree/
If you are using Apache, you can use mod_dir's DirectorySlash directive to automatically fix this for you: mod_dir documentation
I hope this help:
Browsers when see URLs which start with /, they remove the path part of the document.location.href, or get the value of document.location.origin and append the current URL to the end of it.
When they see URLs which don't start with '/', they append the current URL to the end of document.location.pathname.
From a comment by Sam Dufel on the question:
I've noticed that with friendly URLs,
browsers will often look in a
different relative path depending on
whether or not you include a trailing
slash. I.E,
http://www.myserver.com/subtree would
have a relative root of
http://www.myserver.com/, and
http://www.myserver.com/subtree/ would
have a relative root of
http://www.myserver.com/subtree/
(here so you can mark this question as answered)
Related
We have a qa/dev server and a prod server. The two differ by a directory like this
https://domain/service/envQA/sitename
https://domain/service/env/sitename
In some static html I'm trying to put in src and href that are relative to avoid having the markup reference QA if a developer migrates the content and doesn't update an absolute path that includes the envQA. We aren't very fancy and just move most documents over by hand and a busy developer might miss a reference in the middle of several pages of markup -- it happens.
So I'm trying to use relative paths like this.
<img src="assets/backgroundimg.png" />
This works when the user is at our homepage url of https://domain/service/env/sitename but unfortunately our site also has navigational elements that return the user to https://domain/service/env/sitename/ (note the closing slash).
Is there any way (without javascript) to handle a relative path that would work from either of those "locations"?
Have you considered using the <base> tag?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This would allow you to set a base per environment allowing configuring all urls at once.
I have a huge problem: Everytime I want to include a file in any kind of web project it does not work because for some reason all paths I put into the (for example) html file as a link or script tag don't load because it seams like the relative paths are not working. If I open the html as a file in chrome, it's actually looking for the file in the root directory of the drive and not in the folder of the html. The same error appears if I try to use any kind of local webserver (real hosted server works). I also downloaded any kind of demo projects and installed a few yeoman generators and the all got the same problem: Chrome says that it cannot find the file or it's just an empty file.
That's the reason why I think the problem has to do with my own pc. Any ideas what could cause this issue?
If your URLs for includes start with /, they will go to the absolute path. When testing locally from your filesystem, this is the root drive (such as C:\). If you want relative path, drop the /.
Also, check for the following tag in your HTML: <base href...> See http://w3schools.com/tags/tag_base.asp. Make sure it's not set to / if you're testing locally.
This <base> tag helps shorten potentially lengthy relative paths. For example:
<script src="resources/production/script.js"></script>
If you add <base href="resources/production/"> to the <head> element, you can shorten your script tag to src="script.js"
Beware ALL relative paths will have their root at resources/production/ if you define it in your <base> tag
I am examining some code for a friend, and have found that the developer who built his site began each and every relative src, href, and include with a forward slash /.
For example:
src="/assets/js/jquery.js"
I have never seen this before. So my question is, why would a developer place a forward slash / at the start of a relative path?
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"
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 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
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.
If my path is "http://www.example.com/folder1/folder2/" how can I return to "http://www.example.com/folder1/"
I've tried
Back
Which get me back to "http://www.example.com/" and not the previous folder. Any clue on how to do it ?
EDIT
I have a
<base href="http://www.example.com/" />
in the head, could it be because it try to go down 1 folder from that base ?
Back
Should work if you drop the trailing slash. Don't really know why it wouldn't work with it but if it's not working, try that...
EDIT Just tested and both versions worked for me in IE8 - what browser are you using to test it?
Another Edit
If you use a <base> tag, all relative hrefs will be relative the href attribute specified as the <base> (thats the point of it). If your base is the root of the site, like http://www.example.com/, links that try to step down a directory won't make any sense, since there's nowhere lower to go, and they will just point to the root directory. However, if the base is the root of the site, there's probably no point in having one at all, since this is, effectively, the default - it would only make a difference if you were working from a higher level directory.
If the base is not the root, but somewhere higher (like http://www.example.com/somedirectory/) there is a point in the base declaration, but you have to make a decision - something would have to be specified absolutely. So if you have done it because you want to refer to all your images as just file.jpg instead of /somedirectory/file.jpg, you either need to change your image references to the absolute /somedirectory/file.jpg, or have your 'navigation links' like the one shown in the question specified absolutely. You can't do both.
I would say (although I don't know much about the rest of your site and how it was built) that your best bet is to scrap the <base> in order to allow for relative navigation links, but the choice is yours...
I got a question and although I could find related information, I'm if it was exactly about what I'm wondering about.
The thing is, I got a site on http://localhost/site.
Now, when I create a link, let's say, <a href="/posts">, it links to http://localhost/posts instead of http://localhost/site/posts.
It works fine if I remove the slash (<a href="posts">), that would be the closest and maybe the easiest solution, but I'd like to know why the links ignore the folder where the file is at?
And I also would like to know if this can be fixed with .htaccess or something.
I've read that a link that begins with / makes it "absolute". So a link beginning with / is only intended to be used to link directly to the root, or to be used by sites stored at the root (in this case it wouldn't make much sense?) ?
The leading '/' at the start of the URL informs the web browser that the path given is absolute (with respect to the web server root), i.e. if you link to /posts then you know that the resulting link will be to http://www.mysite.com/posts.
If you don't supply the leading '/' (and you don't give a complete url like http://www.mysite.com/posts) then usually the url is relative, and any page given will be relatvie to the page currently being viewed.
For example:
page being viewed link url target page
------------------------------------------------------------------------------
www.mysite.com/site link.html www.mysite.com/site/link.html
www.mysite.com/site ../link.html www.mysite.com/link.html
www.mysite.com/some/other/page link.html www.mysite.com/some/other/page/link.html
www.mysite.com/some/other/page ../../../link.html www.mysite.com/link.html
The decision on whether to use absolute or relative links is entirely up to you - the advantage of relative links is that if your site moves, links between pages on your site will still work correctly (for example if your site moves to www.mysite.com/otherpath, then any absolute links such www.mysite.com/originalpath/home will no longer work.
You should see the following site for a more complete explanation of relative urls:
Relative URLs (WebReference.com)
Your site root is localhost although you assume that site is your site root. When you use / it is relative to localhost as it is an absolute link.
Try doing it < a href="../posts" >
./ Means base directory, or home
../ Means one directory up