Is there a way to direct a url such as an image location to your root folder and then into a directory from there.
Currently i am using "../" to go back folders but this gets annoying if you have a complex directory tree.
Thanks
It is just a single character:
/
For example:
/image.jpg
whatever page you put it in, it refers to the same file, root_folder/image.jpg
You can also use <base> to set the base url all urls should be relative to. In general using an absolute path with / is probably prefereable, but <base> may be useful if you have the "root" of your page not on the root of the domain. I.E. example.com/mysite/index.html vs. example.com
https://developer.mozilla.org/en-US/docs/HTML/Element/base
You can just use full Url, like:
http://domain.com/file_in_root_folder.jpg
or absolute paths
/file_in_root_folder.jpg
you can use static addressing that start with http:// and for relational addressing you can use your address with / for example: /foo/bar.jpg
Related
is it a good practice to use / in front of paths in html pages?
If using / for paths, should I set a <base url=""> in my page?
I'm having an issue with a generated css spitting out the following:
background-image: url("/images/pizza.jpg");
as the website is in a domain subfolder, let's say domain.com/project I have a 404 error in the console because the resource is pointing to domain.com/images/pizza.jpg instead of domain.com/project/images/pizza.jpg
I don't want to set <base url="domain.com/project"> ..
In this specific case, how do I work this out?
In general: is it a good practice using / in front of paths, and why?
Use ./ which will point to the current directory (/project).
I use it for a link to the homepage in a subdir (index.php).
And in css it's common to use ../images/pizza.jpg, which means go one folder up and then select the images folder.
I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).
website is located in
http://localhost/mywebsite
I read this useful question Absolute vs relative URLs.
I found differences between /images/example.png and images/example.png
Link To Image
Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite
But when I tested it, it only return /wamp/www/images/example.png
And I should add manually my website folder /mywebsite/images/example.png to relative path.
Link To Image
And it is not useful because of changing the name of mywebsite. So:
Why does this problem occur?
How can I resolve this problem?
You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:
Absolute path
If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:
"/mywebsite/pictures/picture.png"
And it would be the same as:
"http://localhost/mywebsite/pictures/picture.png"
Relative path
A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:
"pictures/picture.png"
But there are other perks with relative paths:
dot-slash (./)
Dot (.) points to the same directory and the slash (/) gives access to it:
So this:
"pictures/picture.png"
Would be the same as this:
"./pictures/picture.png"
Double-dot-slash (../)
In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:
"../picture.png"
You can play around with them as much as you want, a little example would be this:
Let's say you're on directory A, and you want to access directory X.
- root
|- a
|- A
|- b
|- x
|- X
Your URL would look either:
Absolute path
"/x/X/picture.png"
Or:
Relative path
"./../x/X/picture.png"
The easiest way to solve this in pure HTML is to use the <base href="…"> element like so:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
Link To Image
Just change the <base href="…"> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.
The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.
If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.
I have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>
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.
I am storing style sheets in {root}/styles while images in {root}/images for a website.
How do I give the path in the style sheets to go look in the images directory for the specified images?
e.g. In background-image: url('/images/bg.png');
Use .. to indicate the parent directory:
background-image: url('../images/bg.png');
Here is all you need to know about relative file paths:
Starting with / returns to the root directory and starts there
Starting with ../ moves one directory backward and starts there
Starting with ../../ moves two directories backward and starts there (and so on...)
To move forward, just start with the first sub directory and keep moving forward.
Click here for more details!
Use ../:
background-image: url('../images/bg.png');
You can use that as often as you want, e.g. ../../images/ or even at different positions, e.g. ../images/../images/../images/ (same as ../images/ of course)
In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png) and relative paths to some upper level directory (e.g. ../images/sth.png) work.
But!
When you load (in Chrome!) a HTML document from local filesystem you cannot access directories above current directory. I.e. you cannot access ../something/something.sth and changing relative path to absolute or anything else won't help.
If you store stylesheets/images in a folder so that multiple websites can use them, or you want to re-use the same files on another site on the same server, I have found that my browser/Apache does not allow me to go to any parent folder above the website root URL. This seems obvious for security reasons - one should not be able to browse around on the server any place other than the specified web folders.
Eg. does not work: www.mywebsite.com/../images
As a workaround, I use Symlinks:
Go to the directory of www.mywebsite.com
Run the command ln -s ../images images
Now www.mywebsite.com/images will point to www.mywebsite.com/../images
Supposing you have the following file structure:
-css
--index.css
-images
--image1.png
--image2.png
--image3.png
In CSS you can access image1, for example, using the line ../images/image1.png.
NOTE: If you are using Chrome, it may doesn't work and you will get an error that the file could not be found. I had the same problem, so I just deleted the entire cache history from chrome and it worked.
if you want to go to the root of the folder use / or ctrl+space
if you want to go to the back folder use ../ and ctrl+space if it dont suggest
and not use the live server if you use the ../