I have a stupidly simple problem and I cannot solve it. All I want to do is to pull files from my local disk (where the website is being hosted) but the file paths are not being recognized or something. I tried a whole bunch of variations:
<img class="img-polaroid" src="groceries.jpg" />
<img class="img-polaroid" src="C:/path/to/file/groceries.jpg" />
<img class="img-polaroid" src="file:///C/path/to/file/groceries.jpg" />
What are my options for loading local images? How can I separately "host" images so I can reference them with a URL or something? Which is better?
Actually you can't, because think of it, it'll be a security risk. Your friend would send you and HTML file, and there it is, it accesses all the files on your C drive and deletes them.
However, you can serve files (including image files) locally.
All you need is to install a local web server, and host your site in that server, and change the DNS settings, so that user would access a locally installed website using names in the browser, just the way they surf the Internet.
You can provide images from your machine if it's reachable from the outside (the Internet). If it is, just provide a link to your computer.
It is not advisable to use your local machine (maybe just for some show-off purposes).
You can:
Place images on the server:
and specify paths as:
relative to URL: src="path/to/file". Notice there is no / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/something/path/to/file.
absolute to URL: src="/path/to/file". Notice the / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/path/to/file.
Use a cdn:
provide src as src="<cdn URL>/path/to/image"
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.
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".
When I try to display an image from local storage in browser through a struts 2 action page, the image cannot be loaded and is not displayed despite the img src file showing the location in local disk partition correctly. Please any one help me with this issue. Thanks in advance.
Here is the struts 2 code:
<img src= "<s:property value="profilePicture"/>" height="150" width="150" align="middle" />
This is the output I get in browser:
Place your image on the servlet (outside WEB-INF) and fetch it from there.
I assume you have a folder structure for your web application. In general it will look sth like descibed in here:
http://docs.oracle.com/javaee/5/tutorial/doc/gexap.html
So keep your images in the root directory of your project. Otherwise can you imagine the security implications if someone could start accessing data that exist on your local drive?
Also check this older post that is related to what you are asking:
How to get server local drive path in web application?
If your file is in your local hard disk, which seems strange, the only problem is your image addressing.
If your image is at d:\profile_pictures\uploaded_aaa_bbb.jpeg the <s:property value="profilePicture"/> should return exactly this. You can easily test it by copy d:\profile_pictures\uploaded_aaa_bbb.jpeg to address bar to and see if you can see the image.
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.
I created and deployed a webpage locally on my hard disk and found that nothing is working as I expected. All code for my website is structured in the following format:
default.html
images/tpc/.... [all images here]
js/ [all js file is here]
And my HTML looks something like this:
<li>
<a href="javascript:void(0)">
<img alt="" height="16" src="/images/tpc/slide-butn.png" width="15">
</a>
</li>
This is creating a problem, when another person open the default.html page from their own disk, I suppose the image links are getting referred to as:
file:///C:/images/tpc/slide-butn.png
Is there something I can do to resolve this issue?
Have you tried a relative URL?
<img alt="" height="16" src="images/tpc/slide-butn.png" width="15">
Most websites need to be tested using a webserver, not just opening random files. There may not necessarily be a way to "fix" it so that you can directly open the files. If a URL starts with "/", then it is relative to the domain on which the file is served, which may have a different effect than a relative URL, depending on what file the domain-relative URL appears on. My suggestion would be to develop a standard mechanism for testing your website, such as a command that can start up a demo webserver in a similar configuration to that of the real website, or some shared testing server.
Note that even if you change everything to relative URLs, you will run into similar trouble when it comes to headers set by the webserver, cookies, any sort of dynamic or interpreted pages, mime types, etc. at some point if you just open files rather than use a test web server, so might as well bite the bullet now.
You need to drop the leading slash and make the urls relative to the file save location.
For example, if your images are in a directory named images in the directory where your html file is, the correct url would be
<img alt="" height="16" src="images/tpc/slide-butn.png" width="15">
This says you look in the images directory in the same directory as the file. With the leading slash, the browser will look in the root. Great great for a website, not so much for a local directory.
This post on relative and absolute urls should give you a better explanation.
Try to use relative path:
src="images/tpc/slide-butn.png"
(first slash omitted)