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)

The image is on the client machine that makes the http request from the server machine — PrashanD
– PrashanD, Commented Jan 28, 2015 at 14:24
Map the drive to the server and put its mapped name in, so in Windows Explorer on the server, click Map Network Drive and map the client's C: to the server's E: and then put E:... in the HTML. — Mark Setchell
– Mark Setchell, Commented Jan 28, 2015 at 15:28
Nice one.. but the server is not a windows machine. It's an Arduino.. :( — PrashanD
– PrashanD, Commented Jan 28, 2015 at 16:07
Does this answer your question? How to show local picture in web page? — Andrey Ozornin
– Andrey Ozornin, Commented Nov 10, 2021 at 14:13

PA. · Accepted Answer · 2015-01-28 14:31:03Z

9

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.

answered Jan 28, 2015 at 14:31

PA.

29.5k10 gold badges77 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sade Over a year ago

How can we fix it?

quiet-ranger Over a year ago

And why are images on your local machine less secure than images on the Internet? FireFox does not seem to have a problem with that...I am wondering here

U r s u s · Accepted Answer · 2015-01-28 14:31:20Z

1

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)

answered Jan 28, 2015 at 14:31

U r s u s

7,05812 gold badges54 silver badges88 bronze badges

1 Comment

PrashanD Over a year ago

No luck with any of the changes

player · Accepted Answer · 2015-01-28 14:32:10Z

1

A html page cannot request images from the client host. It must be stored on the server, or in another remote location.

answered Jan 28, 2015 at 14:32

player

8011 bronze badges

Comments

user1092126 · Accepted Answer · 2016-04-27 21:11:20Z

-2

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

answered Apr 27, 2016 at 21:11

user1092126

Comments

Jacob · Accepted Answer · 2022-03-04 09:12:43Z

-3

it can be solved like this:

.img-class
{
  background-image:url("../../resources/myImage.jpg");
  width: 100%;
  height: 100%;
}

<img  className='img-class'/>

answered Mar 4, 2022 at 9:12

Jacob

11 silver badge1 bronze badge

1 Comment

Brian Patterson Over a year ago

this simply looks on the server filesystem, not client filesystem. sorry no tortilla

Collectives™ on Stack Overflow

How can I display an image from the local machine on a webpage

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related