loading image from local disk to html

Question

I have to upload an image onto my HTML page from my local disk, which I know now is not possible because of the security reasons and the same origin policies.

1.) My image 'loadingimage.jpg' is at the same location as my .html page. I did try relative paths like

<style>
body {
background-image: url("/loadingimage.jpeg");
}
</style>

and it gives me error like

Failed to load resource: the server responded with a status of 404 (Not Found)  
http://10.2.9.208:8081/loadingimage.jpg

I do not get this error when I open files directly, only when I am using node js express to serve this html file from my disk. I have this code in my node js

app.get('/abt', function (req, res) {
res.sendFile(path.join(__dirname, '../../startpage.html'));
});

Please do not downvote this question as a duplicate as I have gone through all the links and have not been able to find a solution.So, I am reposting it. Can this be done without conversion to base64 codes? What do I do?

2.)But even if I somehow manage to display it on my browser, I want all the clients browsing my webpage to be able to see it, like suppose a WELCOME image. How do I make it possible?

I am not allowed to use any image hosting servers on the web. Can I do something like accessing the client PC and storing the image locally there, using it and then deleting it when the page is closed?.

I have a server machine running in the background, Is it in any way possible to store these images on the server and then retrieve it and display it on the client PC?

EDIT 1: I tried using this

 <img class="logo" src="http://10.2.9.208:8081/loadingimage.jpg" alt="My_Logo">

This now, not only gives me the same error, but also displays a broken image.

the fiddle for this : https://jsfiddle.net/SuchitraIyer/sno3j98w/

They are working fine now directly, only node js express gives an error — Suchitra Iyer, Jun 20 '16 at 06:15
@Nitin, it is not external, it is a part of my HTML file only. — Suchitra Iyer, Jun 20 '16 at 06:26
access your image path same as your html page like '../../loadingimage.jpg' — Nitin Dhomse, Jun 20 '16 at 06:28
Try changing nodejs express to serve all static files:http://stackoverflow.com/questions/6084360/using-node-js-as-a-simple-web-server — Rahul R., Jun 20 '16 at 06:30
@RahulR, Hi, if my express can server startpage.html, why will it not serve image.html placed at the same location? — Suchitra Iyer, Jun 20 '16 at 06:39
@SuchitraIyer, It can, if you do so, I am not sure about syntax to be used, but quick googling should help. — Rahul R., Jun 20 '16 at 06:58
Hi, My express has been configured fine and so, my .html pages are being called fine. The only problem is with this image — Suchitra Iyer, Jun 20 '16 at 11:58
did you have this code in your node expressjs server file: app.use(express.static('app')); instead of "app", use your folder which has your static content — Rahul R., Jun 23 '16 at 13:39

score 0 · Answer 1 · answered Jun 20 '16 at 05:57

0

If your image on same location with your page / same folder and spell image name correctly then try the below code:

body {
   background-image: url("3011483-euro2016-omb-pes2016_1.jpg");
}

you just need to remove forward slash from the start of filename...

I hope this will help you...

Thanks...

answered Jun 20 '16 at 05:57

Mayur Siddhapura

296
2
6

I am getting the error only when I use node js, otherwise it has started woring fine. I have edited my question. Thank you – Suchitra Iyer Jun 20 '16 at 06:14

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

If your HTML FILE and IMAGE are in the same folder then

 background-image: url("YOUR-IMAGE-NAME");

Other than if you create any folder

--FOLDER/YOUR-IMAGE-IMAGE

-HTML file

code would be like this.

 background-image: url("FOLDER/YOUR-IMAGE-NAME");

The Alternate method you can use this with your full PATH starting with file:///.

file:///C:/imagename

I HOPE THIS ANSWER HELPS YOU.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 20 '16 at 06:09

Gautam Jha

1,445
1
15
24

Hi, they are working fine directly, but not through node js – Suchitra Iyer Jun 20 '16 at 06:15
@SuchitraIyer It seems your node js server is not loading all the static files, i.e. the server doesn't read the image, but just the html. Change the way you are running your node server. – Rahul R. Jun 20 '16 at 06:26
@SuchitraIyer try `base` tag in `` – Gautam Jha Jun 20 '16 at 06:34

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

Put your image into a folder, and then type the path and see like

body {
  background-image: url("images/loading.jpg");
},

since you are using node.js, this thread might help you

How to serve the image files using express framework in node.js?

edited May 23 '17 at 10:34

Community

1
1

answered Jun 20 '16 at 06:19

Prakash

335
3
8

score 0 · Answer 4 · answered Jun 20 '16 at 06:32

0

body {
  background-image: url("../../loadingimage.jpg");
},

answered Jun 20 '16 at 06:32

Nitin Dhomse

2,524
1
12
24

i think your image path should resolved from server root location – Nitin Dhomse Jun 20 '16 at 06:52
currently my server is my machine only, My node js express is running on my PC only – Suchitra Iyer Jun 20 '16 at 06:53
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge. – abarisone Jun 20 '16 at 07:06
Thanks @abarisone for suggestions, I will do it. – Nitin Dhomse Jun 20 '16 at 07:38

score 0 · Accepted Answer · answered Jun 20 '16 at 12:29

0

This worked for me only when I transfered my image to the same location as my node js file, nothing else worked though it should have.

answered Jun 20 '16 at 12:29

Suchitra Iyer

53
14

loading image from local disk to html

5 Answers5