I am facing difficulty in understanding relative path concept, I have seen a part of code written as
../../abc/file/images/picutre/down.gif
how the relative path is computed
A relative path is a path relative to the working directory. In other words the starting point to look for files is from the working directory.
The "../" in a relative path means to go up one directory.
So lets say you're referencing the relative path ../../abc/file/images/picutre/down.gif from an index.html page in the following structure :
http://someexampleurl.com/dir1/dir2/index.html
Your working directory when working from index.html is /dir2 so taking into account that you're going up two levels, the browser expects the file to be at:
http://someexampleurl.com/abc/file/images/picutre/down.gif
how the relative path is computed
Basically a relative path is a "map" from the directory that you are located to the file you need to include. Therefore, relative path is computed based on where you want to go.
For example you have a structure
/ (document root)
|--home.php
|--t.php
|--common
|--header.php
|--footer.php
|--support
|--index1.php
|--privacy
| |--index2.php
From home.php you need to include header and footer. Therefore your home code will look like
<?php
include("common/header.php"); // go one folder down (common) and grab the file header.php
include("common/footer.php"); // go one folder down (common) and grab the file footer.php
Now let say you are in index1.php in support and you need header.php and footer.php. You code will look like
<?php
include("../common/header.php"); // go one folder up (common) and grab the file header.php
include("../common/footer.php"); // go one folder up (common) and grab the file footer.php
Think folder inside folder as levels (level1, level2, etc)
Note: Be careful with relative paths something they are a pain.
it says go back up two level (parent directory) "../../" from current location.
So if we are on https://example.com/my/path/here and it loaded a file ../../abc/file/images/picutre/down.gif then we would go up 2 directories because of the 2 ../'s to https://example.com/my. Then we would go down to /abc/file/images/picutre/down.gif. So the final destination would be https://example.com/my/abc/file/images/picutre/down.gif
down.gif is present in the same directory
/ starts form root directory
../ one directory back from current directory
../../ two directory back from current directory
Related
I have a folder named "myWebsite".
Inside that folder I have "index.html" and another folder named "other". Inside "other" I have CSS files JS files and "page2.html". I have linked all files with my "index.html". But when I am in "page2.html", I want a link that will lead me to "index.html".
go back
In order to navigate back you should use '../' if you want point two folders back you can use '../../' for instance.
In this case, within Page2.html use:
<a href="../index.html">go back<a>
NOTE: You have an extra dot.
Based on what you wrote, this should fix it:
link
The ../ directory references the parent directory.
Examples:
<a href="sample.html"> The "sample.html" file is located in the same folder as the current page.
<a href="pages/sample.html"> The "sample.html" file is located in the pages folder in the current folder.
<a href="/pages/sample.html"> The "sample.html" file is located in the pages folder at the root of the current web.
<a href="../sample.html"> The "sample.html" file is located in the folder one level up from the current folder.
See here for more on HTML filepaths.
This question already has answers here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
(12 answers)
Closed 3 years ago.
Given the following project structure:
/root
/static
script.js
page.html
This will 'import' script.js, into the HTML file:
<html>
<head>
<script src="/static/script.js"></script>
</head>
<body>
...
</body>
</html>
this will, as well:
<html>
<head>
<script src="./static/script.js"></script>
</head>
<body>
...
</body>
</html>
I am wondering:
Is one way preferred over the other?
Are there any cases, when / and ./, in she src attribute of <script> will behave differently?
Yes, They both are different.
You are not able to see as the index.html is already in your root directory.
If there is a .html file inside a directory. Then you can see the difference.
./ This gives a relative path from the file you are accessing it
/ This gives an absolute path from the root of your directory
If this is the directory structure
/root
/static
script.js
/page
index.html
Then, you won't be able to use ./ as it won't find script folder in the page folder
So, if you have a complex directory structure use ./ i.e. relative path, and if you have a plain structure / i.e. absolute path would be good. For better practice, the relative path is preferred over an absolute path.
Hope, this answered your question.
Now, I am not super experienced in JavaScript, but I'll let you know what I know.
[...]
<script src="./static/script.js"></script>
[...]
<!--This would reference files in the current folder (where the webpage itself is stored)-->
[...]
<script src="/static/script.js"></script>
[...]
<!--This would reference an absolute path within your webserver, and cannot change dynamically based on from where you load it.-->
Generally speaking, I'd go for ./ when you load it from a file in your current folder (and/or server), whilst doing / seems like an external reference to me, which is also not dynamic. If you happen to move the file (if it was in the same directory as your page), I think JavaScript would also reference the new file instead of complaining about the old one.
I cannot guarantee that any of the info above is correct as I am not a really good JS-Developer, but at least this should help you figure out the syntax a little more.
./ is a relative path or the current directory where your asset will be served.
/ is an absolute path or the root path from where your asset will be served.
./ is a relative path linking to the current directory.
/ is an absolute path linking to the root directory.
You can find more information here.
In my gulp workflow I have a task that uses npm browser-sync module to serve static files. One of the options of this module is able to set a base directory to let me call js/css/img files etc, and include it using an absolute path like this:
<img src="/imgs/label.png">
this feature let me call this file from any subdirectory I want
/public
---/imgs
------label.png
---/catalog
------list.html <--- here
---index.html <--- and here, this image called using the same path /imgs/label.png
this works fine. Otherwise, I have a task that builds the final compressed and minified version of static files. The problem is, that when gulp building a dist folder with that files that located in the public folder, in html files, there's still absolute path in attributes like href/src. I need to convert the absolute path into relative with keeping a folder structure. I mean that in index.html src has to be imgs/label.png, and in catalog/list.html the same src attribute has to be ../imgs/label.png. Question: is there any module that able to do this for me, or maybe there's some another way to do that, instead of replacing the paths with own hands? Any advice would be appreciated.
So Im trying to link a local copy of bootstrap (It works with a CDN). I have bootstrap.css installed in the same directory as index.ejs and yet I keep getting these 404 errors.
So the file path for bootstrap.css is /home/daniel/scheduler/doc_display/app/bootstrap.css
and index is: /home/daniel/scheduler/doc_display/app/index.ejs
Any help would be much apreciated
Your browser is going to look for the file relative to the location of the page it loads, so you need to make sure your path is correct.
Right now it's looking for it in the same folder as the index, which it looks like isn't where it's located.
I put the bootstrap.css file inside of my dist directory then included the new path inside the link tag. For some reason webpack seems to find paths when they are in the dist directory
I have used the generator of app ionic start myApp blank as a start point.
But now I have special requirements of code's structure.
I must place in a same group the resource of the same type.
js directory for just js files
html directory for html files
and so on...
The problem here is index.html, I must move it from www directory to www/html directory, how can I achieve it?