This is a newbie question, I know, but I couldn't find clear answer.
My web root looks like this:
/index.html
/img
I set up subdomain img.my-domain.com, it points to /img folder
Now, in my index.html I call image located in subdomain i.e. folder img
I can do it using relative and absolute path, both are working:
src="/img/image.jpg"
src="http://img.my-domain.com/image.jpg"
My question is: is there any difference? In the context of parallel downloads concept, is the image gonna be perceived by browser as coming from subdomain in both cases?
I have a lot of images and want to serve them from 2 subdomains. However I develop locally and when the website will go online, I would have to change image links from relative to absolute in case absolute path is required.
Thanks
src="/img/image.jpg"
Will send cookies for www.my-domain.com. Won't appear as a separate domain.
src="http://img.my-domain.com/image.jpg"
Will have separate cookies. Many websites do this to improve performance.
You should real use the relative protocol so if you need SSL, you won't get warnings. src="//img.my-domain.com/image.jpg"
no there isn't but the relative path is the common way.
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".
This question already has answers here:
Absolute vs Relative Links : Technical Difference
(2 answers)
Closed 4 years ago.
I have a question about absolute and relatives links as I am working on an assignment and seem to be a bit confused... what are the different situations that each type of link would be used in?
Thank you!
In short, relevant links look for files in that same folder structure. For example, if you had the following structure for your files:
root
/assets
/img
image.jpg
index.html
Then when finding an image to use on your image.html page, you could enter <img src="assets/img/image.jpg">. An absolute URL includes the full URL to that image, so it would be something like <img src="https://example.com/assets/img/image.jpg">.
Generally, using relative URLs is the easiest to manage things. If you use a content management system it will often use relative URLs.
Absolute URLs can be used everywhere - you'll need to use them if the URL isn't in your site structure.
Either one will get the same result if you have the image on your server, relative URLs are usually just faster to type. :)
#Danny Santoro does a good job explaining what relative and absolute links are. As for when to use them:
Use relative links whenever you're linking between pages on the same domain. For example, if you're working on https://www.google.com and you want to link to https://www.google.com/orange, you should use a relative link which would look like this: Go to Orange.
Use absolute links whenever you're linking between two pages on different domains. For example, if you're working on https://www.google.com and you want to link to https://www.facebook.com, use an absolute link: Go to Facebook.
As for why relative links are better if both the source and destination are on the same domain - let's say the site you're working has the domain oranges.com. Then you use absolute links - hard code every link on your site to be www.oranges.com/foo. Then later down the line, you want to switch your domain to be www.grapes.com. Now you have to go back and manually change every single link on your website to say www.grapes.com! Whereas if you'd just used relative links, you wouldn't have to change anything.
If you're linking to another domain, then you have no option but to use absolute links. Relative links only work when both the source and destination are on the same domain. So in this case you would use absolute links.
Hello I have a website with image links like this:
<img src="/flower.jpg"/>
I have a task to change the website path from www.domain.com to www.domain.com/blog. as www.domain.com will be used for a different site.
I am handling the redirect with nginx so www.domain.com/blog loads up the new website but the assets and images are not loading obviously because the links like <img src="/flower.jpg"/> are searching for images at :
www.domain.com/flower.jpg
whereas the image is available at
www.domain.com/blog/flower.jpg
Now I dont want to change the paths everywhere in the code. whats the best way to achieve what I need.
I just re-read your question and realised you've already moved your image files.
If you're using Apache you can try setting up a virtual host for you /blog directory, and set DocumentRoot in the config?
Otherwise I'm afraid you've got a lot of path adjusting to do in your code.
I think you can choose location or rewrite.
The location-method:
location ~ /[^/]*.jpg {
root /your/images/directory;
}
The rewrite-method:
rewrite ^/([^/]*)\.jpg$ /blog/$1.jpg;
For my webpage http://www.example.com/homepage.html which is the best way to link static resources, such as CSS files?
http://www.example.com/css/base.css
http://example.com/css/base.css
/css/base.css
Neither is better.
One will survive moving the linking document to a different location. The other will survive moving the entire tree to a different location.
In most cases, the latter is more useful (as it lets the links work between environments (development, staging, test, production)) but your needs may vary.
Relative path is best way to use.
Ex : http://www.example.com - Absolute path
Relative path
var style="css/base.css";
var style1="css/base1.css";
Then, Absolute path+style;
or absolute path+style1 . We can able to change relative path without hard coding.
For internally-served resources, typically you would use a relative URL, for the reasons stated by Quentin (upvoted accordingly).
However, absolute URL's are useful in some important scenarios that you should be aware of, for example:
When you use a CDN (content delivery network) to serve your static files (such as the CSS files you mention in your question) more quickly. These are served from other servers than yours, so you have to fully specify the location.
When you need to change the protocol. The most common case is switching to https, e.g., for actions like signins and purchases.
If you are putting links into an email, where of course relative paths won't go anywhere. This isn't relevant for loading a CSS file, since styles are inlined in HTML emails, but still it's a case to consider, e.g., for images.
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.