How can I display an image from the local machine on a webpage
Question
Here's the scenario: I have two machines on a LAN network. One of them is acting as a web server. When the second, client machine browser (Firefox) makes a request from the server, it sends the following html
<!DOCTYPE HTML>
<html>
<body>
<img src="C:\Users\General\Desktop\map1.jpg" align="middle">
</body>
</html>
The image however is not displayed. I have tried the following variations to the img tag:
<img src="C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="file:///C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg" align="middle">
Funny thing is if I view the page source and save the html content to a local file and open it in the browser it works. The exact same html code does not work when fetched from the server, but works when opened on the local machine.
Please note that I'm trying to load the image off the client machine because it is impossible to store an image on the server machine in my scenario. (The server is actually an Arduino Mega without an SD card)
4 answers
solution1
3 ACCPTED 2015-01-28 14:31:03
In most recent browsers, links to local files ( file:/// ) do not open, for security purposes. In your case, the browser does not display an image that resides on a file on your hard disk. This reason also explains why it works when you save your page locally.
solution2
0 2015-01-28 14:31:20
For starter, you need to add the runat="server" attribute.
If that doesn't suffice, then:
you should change
<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg"/>
to something like
<img src="http://localhost/General/Desktop/map1.jpg"/>
or even better to
<img src="~/General/Desktop/map1.jpg"/>
which targets the root of the application (you would need to move your image in that directory)
solution3
0 2015-01-28 14:32:10
A html page cannot request images from the client host. It must be stored on the server, or in another remote location.
solution4
0
If you are using Arduino you can:
Use embedded css and images. In result you will got whole page by one browser call
Add additional logic to process browser requests for getting css and jpg files from SD card filesystem of Arduino
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.