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.
Related
I wrote this code, but I couldn't get the html. I don't know why. I want to know why this is when the route is not wrong.
<img id = "navLogo" src = "C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/imgs/navLogo.jpg"></img>
For security reasons, websites may not request arbitrary files from your machine's filesystem.
Keep in mind that the way this works is the HTML is sent to the browser and then the browser sends a second request for the image.
In this case the browser would be trying to get the file off of your machine, (which may coincidentally be where the web server happens to be running), but if this site were live on the web and someone else accessed it, their browser would be trying to get this image from that user's machine, not from the website.
If the browser was allowed to serve files from your local filesystem, one could very easily create a site to grab files off of your machine and transmit them elsewhere, creating a MASSIVE security problem.
To fix this you should specify a path relative to the web server's root, which would probably mean:
<img src="/imgs/navLogo.jpg" />
or maybe:
<img src="/TermProject/imgs/navLogo.jpg" />
Note that behavior will be different if you're loading the HTML file from the filesystem (the location is file:…) vs. serving it from a web server (location is http://…). I'm assuming you're doing the former here based on the fact that your image is under an apache directory.
Ray Hatfield's answer is good but I don't have enough rep to comment.
I think you are misunderstanding absolute vs relative paths here.
You are thinking of absolute as starting with your c: drive, but on a web server, the absolute path starts at the root of your site, which is always just a forward slash "/".
Relative paths begin from the current directory of the source file(s) that specify them.
Neither of them can go higher in the file system than your site's root folder.
To put it simply (specifically answering "How do I specify an absolute path?"):
All absolute paths on the web start with a /
All relative paths on the web do not.
Given the path in your example:
C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/imgs/navLogo.jpg
A default apache installation considers the site root to be the "htdocs" in this path.
This means that the absolute path / on your website is found at C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/ on your hard drive.
If you have a file C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/index.html then you can access the navLogo image from that page
with an absolute path at:
/TermProject/imgs/navLogo.jpg
or a relative path at (note the missing forward slash):
imgs/navLogo.jpg
I believe the source you specify should have path starting from folder where your html is located. So, try something like this "/imgs/navLogo.jpg".
From the very start of my development career one thing that has kept confusing me is relative and absolute paths.
Now I understand it in the way of URLs and that if you are going to a webpage on the same server you use the relative path and if the page is on a different (external) server then you will need to use the absolute path i.e. http://www.google.com. But I never understood it in the way of files.
Example and my problem.
I am building a HTML email class that will send a image as a img as a banner
builder.AppendLine("<img src=C:\Images\\MailBanner.jpg\" alt=\"banner\">");
Now if I use the absolute path like above, the image will display.
However, when I deploy the site onto our web server, then of course, the image is not in the C: Drive so the image doesn't appear in the email. So where do I need to put the \..\ in the source?
Is it as the point where the image is stored on the web server in the project?
I guessing you may need some more information then I have posted but I may need some explanation really.
Thanks
Just put images in a folder images under your project folder then your code will be:
builder.AppendLine("<img src=\"\images\MailBanner.jpg\" alt=\"banner\">");
And your image path is:
/project/images/MailBanner.jpg
And your project is normally under the www folder of your web server folder.
Set up an images folder in your project and fix your src attribute:
builder.AppendLine('<img src="images/mailbanner.jpg" alt="banner">');
EDIT: your problem here is your javascript code. You need to use an Apostrophe before and after your tag and quotation marks for your attributes of the img tag. Otherwise your javascript cant understand which your attributes are.
I prefer to mostly use relative paths, because when you move the data from a local location to a web server, as long as the directory structure doesn't change nothing will break. But, the OS also matters.
For instance, I can see that your file was moved from a windows server. So unless you moved it to another windows server and the drive letter is the same, your absolute path is broken.
If the file was moved to a windows server with the exact same directory structure:
builder.AppendLine('<img src="C:\Images\MailBanner.jpg" alt="banner">');
If the file was moved to a linux server:
www/images
builder.AppendLine('<img src="/Images/MailBanner.jpg" alt="banner">');
NOTE: The first forward slash is very important. The / tells Apache that the directory is located in the document root (www). Without the /, Apache expects the directory to be in the current directory where the file/script is located. Another important consideration when moving files from Windows to Linux is that Linux is case sensitive. /Images/MailBanner.jpg is not the same as images/mailbanner.jpg.
I copy a large html source of an external page (say, http://www.example.com/bar/something.html) into a directory in my PC (say, /xxx). The file 'something.html' contains many absolute references in the form href="/bar/another.html" or src="/bar2/yetanother.jpg" etc.
If I simply click 'something.html' (accessing it from my browser as 'file://') -- or even if I upload it to my own server and access it via 'http://' -- all those references will be looked in the same host where the file is. I still want them to be looked in the original host (i.e., http://www.example.com).
Had they been relative references (without the 1st slash), I would simple put <base href=" http://www.example.com/"> in the HEAD section. How can I achieve a similar effect with those absolute references??
Consider also the case where something.html includes many other files (css, js, ...) which may also have such absolute references...
You have the terminology backwards: the reference /bar/another.html is a relative reference, not an absolute reference. The / indicates to restart at the root of the resource. For file:/// URLs, this will start at the root of the filesystem, but it's still relative.
If you add the <base href="..."> it will prepend the ... to the URL, unless the URL is indeed absolute (begins with http://, ftp://, file:// etc)
If you use the base href as file:///where_i_downloaded/, you'll get resources linked from there (not from the root of the file system), or as http://www.foo.com/ which would force the browser to attempt to load from the original server (attempt, because URLs for AJAX services may not work with this).
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)
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.