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".
Related
I originally transferred this project from windows to linux, and it was working completely fine on windows, but now images are not loading.
I have an image:
<img src="/assets/s1.png" alt="dinosaur">
And it is only loading on the webpage if I change the filepath to /home/user/Desktop/Project/assets/s1.png
The image file is in the folder assets and the assets folder and html file are both within the Project folder.
The weird thing is that when I change /home/user/Desktop/Project/assets/s1.png to /Desktop/Project/assets/s1.png it stops working. I would like to be able to only include the necessary path /assets/s1.png because I will need the path to stay the same if this project gets moved around between environments.
Based on a comment on the question:
the address of the page is file:///home/user/Desktop/Project/file.tpl
That's the problem then. The "root" of the "web server" (from the browser's perspective) is the root of the file system. So this absolute path won't work:
<img src="/assets/s1.png" alt="dinosaur">
But this one will:
<img src="/home/user/Desktop/Project/assets/s1.png" alt="dinosaur">
However, that latter one clearly won't be helpful in a web-hosted environment.
You can instead use a relative path, for example:
<img src="./assets/s1.png" alt="dinosaur">
This should work in the example given, but we can't know if this will have further implications in a larger and more complex web application. For example, if you're dynamically loading sections or templates from different folders, their "relative paths" may be different. (That's one advantage of absolute paths, they're the same regardless of what page you're on.)
But more to the root cause of the problem... You really shouldn't be testing a web page from the file system. The intent is to host it on a web server, so the testing should be hosted on a web server.
It makes little sense to make changes to the code in order to get it to work in an environment that will never be used, only to probably have to make more changes to get it to work in the actual target environment. Keep the test environment and the target environment as similar as possible.
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.
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.
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.
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.