Difference Between Relative Path and Absolute Path in JavaScript

Difference between Relative path and absolute path in javascript

What is the difference between Relative path and absolute path?

One has to be calculated with respect to another URI. The other does not.

Is there any performance issues occures for using these paths?

Nothing significant.

We will get any secure for the sites ?

No

Is there any way to converting absolute path to relative

In really simplified terms: Working from left to right, try to match the scheme, hostname, then path segments with the URI you are trying to be relative to. Stop when you have a match.

What is the difference between an absolute and a relative path?

Say you were giving directions to a spot. You have two methods you can describe getting to the location:

• Relative to where you stand,
• Relative to a landmark.

Both get you to the same location, but the former doesn't always work ("take a left, then a right, go through two lights then take another right" wouldn't necessarily work from the next town over, but works from where you stand). That's essentially the difference.

If you have C:\Windows\System32, that's an absolute path. If you have Windows\System32, it will only work so long as you're starting from C:\. If you start in C:\Program Files you would need a ..\ to get there correctly.

However, no matter where you are on the hard drive, C:\Windows\System32\ is a definitive way to get to that folder.

Absolute vs relative URLs

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

What does ./ (dot slash) refer to in terms of an HTML file path location?

./ is the the folder that the working file is in:

So in /index.htm ./ is the root directory

but in /css/style.css ./ is the css folder.

This is important to remember because if you move CSS from /index.htm to /css/style.css the path will change.

How to check if a path is absolute or relative

Since node version 0.12.0 you can use the path.isAbsolute(path) function from the path module.

i.e:

var path = require('path');
if(path.isAbsolute(myPath)) {
    //...
}

Absolute path & Relative Path

Absolute paths start with / and refer to a location from the root of the current site (or virtual host).

Relative paths do not start with / and refer to a location from the actual location of the document the reference is made.

Examples, assuming root is http://foo.com/site/

Absolute path, no matter where we are on the site

/foo.html

will refer to http://foo.com/site/foo.html

Relative path, assuming the containing link is located in http://foo.com/site/part1/bar.html

../part2/quux.html

will refer to http://foo.com/site/part2/quux.html

or

part2/blue.html

will refer to http://foo.com/site/part1/part2/blue.html

Path problem in URL ( absolute and relative )

Change to

<link rel="stylesheet" href="/style/not-found.css" >. 

You want a path that is relative to the public directory that express.static() has as its root.

But may u please explain me in case href="./style/not-found.css" why it's works correctly when user enter : "localhost:3000/5" but not work on "localhost:3000/products/5" (I mean loading css successfully)

When the link your HTML page does not start with http:// or with /, then it is considered a path-relative link and the browser will take the path of the page and combine it with the URL in the link to make a full URL before sending it to the server. So, when you have this:

href="./style/not-found.css"

and the page URL is this:

http://localhost:3000/products/something

The browser will end up requesting:

http://localhost:3000/products/style/not-found.css

And, your server won't know what to do with that. On the other hand, when you change the <style> tag to this:

 href="/style/not-found.css"

Then, your URL starts with a / so the only thing the browser will add to it is the domain and the browser will request:

http://localhost:3000/style/not-found.css

which will work.

So, when you use a path like:

http://localhost:3000/5

Then, the path for that is just / so when you combine / with ./style/not-found.css, the browser will end up requesting

http://localhost:3000/stye/not-found.css 

and it will work because the path was a root path. So, it doesn't work for pages that are not at the top level. This is why your static resource URLs should always be path absolute (start with a /) so they don't depend upon the path of the hosting page.

What is the difference between Relative and Absolute paths in Aspnet MVC?

Absolute Path:

An absolute URL path. An absolute URL path is useful if you are referencing resources in another location, such as an external Web site.

<img src="http://www.contoso.com/MyApplication/Images/SampleImage.jpg" />

Relative Path:

A site-root relative path, which is resolved against the site root. Site-root relative paths are useful if you keep resources that are used throughout the site, such as images or client script files, in a folder that is located under the Web site root.

The following example path assumes that an Images folder is located under the Web site root.

<img src="/Images/SampleImage.jpg" />

For More Refer:
http://msdn.microsoft.com/en-us/library/ms178116.aspx

Coming to your Question:

<img src="@Url.Content("~/Content/themes/base/images/logo.png")" alt="Koiak Basic Site" />

Here because of using "~".It adds "server" path(i.e; your application path)" to your url. That means it takes img src as "yourapplicationPath/Content/themes/base/images/logo.png"

<img src="/Content/themes/base/images/logo.png" alt="Koiak Basic Site"/>

Here it takes as it is. i.e;"/Content/themes/base/images/logo.png"

For more refer this:

why use @Url.Content

http://digitalzoomstudio.net/2012/04/01/what-is-the-difference-between-absolute-and-relative-paths-urls/

What is the difference between / and ~/ relative paths?

---

Related Topics