Image Files Loading Locally But Not Online?

Question

I have a stupidly simple problem and I cannot solve it. All I want to do is to pull files from my local disk (where the website is being hosted) but the file paths are not being recognized or something. I tried a whole bunch of variations:

<img class="img-polaroid" src="groceries.jpg" />
<img class="img-polaroid" src="C:/path/to/file/groceries.jpg" />
<img class="img-polaroid" src="file:///C/path/to/file/groceries.jpg" />

What are my options for loading local images? How can I separately "host" images so I can reference them with a URL or something? Which is better?

Answer 1

Actually you can't, because think of it, it'll be a security risk. Your friend would send you and HTML file, and there it is, it accesses all the files on your C drive and deletes them.

However, you can serve files (including image files) locally.

All you need is to install a local web server, and host your site in that server, and change the DNS settings, so that user would access a locally installed website using names in the browser, just the way they surf the Internet.

Answer 2

You can provide images from your machine if it's reachable from the outside (the Internet). If it is, just provide a link to your computer.

It is not advisable to use your local machine (maybe just for some show-off purposes).

You can:

1. Place images on the server:

   and specify paths as:

   • relative to URL: src="path/to/file". Notice there is no / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/something/path/to/file.

   • absolute to URL: src="/path/to/file". Notice the / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/path/to/file.

2. Use a cdn:

   • provide src as src="<cdn URL>/path/to/image"