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/

Answer 1

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...

Answer 2

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.

Answer 3

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?

Answer 4

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

Answer 5

仅当我将图像传输到与节点js文件相同的位置时，这对我才有效，尽管它应该有其他作用。