How can an image saved on your desktop be used in your website so that it can be viewed on other PCs, without having to save it?

Question

I had an HTML project and I had used an image saved to my desktop, in my website. I was wondering why it couldn't be viewed on my teacher's PC. Then I realised it wasn't saved on her desktop, and her browser couldn't interpret the file. I then wanted to find out a way to overcome this problem. I then heard about Web Storage API, but I don't know how to implement it in my code, so other users don't have the trouble of saving the same image to their desktop. How do I go about this? Please help. Thank You! 🙏

Answer 1

Ok so lets say you made that website, and called it index.html

you put that index.html in a map, and lets call that map website for example. Also make an images map to keep it organised.

If you're going to put index.html in another map inside the website map (website/html/index.html) the path to the picture is then: .../images/example.jpg

but if you dont put it like that, but just like website/index.html, then the path is images/example.jpg

and then, you upload it to the ftp server

PS: upload the WHOLE map (website map)

Answer 2

Are you using relative path to file?

If you pointed the way like "C:/" it will work only at your PC because this way exist only at your PC

And if you pointed the path to file like "img/grass.jpg", it will work everywhere where this file is.

And if you want to post it on the internet, you can read about hosting

sorry for my English

Answer 3

Ok so, first of all, I'm not very experienced with this.
How I made sure that it worked, is that I used filezilla(FTP-progam) and uploaded the whole folder containing submaps like html, images, css and index.html

That worked for me. If you use filezilla, did you upload the whole folder? If you only upload .html file without the pictures and correct file path, they won't show up.
For images I used <img src="images/smiley.jpg" alt="Smiley face" height="42" width="42">

Or you can img src=".../images/smiley.jpg" if your index.html is in a subfolder

I THINK you're looking for an ftp program, and not Web-storage API.
https://en.wikipedia.org/wiki/Web_storage
It is used for storing data in a web browser, like storing cookies.
But If you really want to learn it, here's a link:
https://flaviocopes.com/web-storage-api/

I say the FTP Filezilla method is the answer, but that's up to you.

Answer 4

Yah but how do i do it?