How to Display an Image from The Local Machine on a Webpage

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

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.

How can I display locally stored images on an internet website?

This sounds like security settings on the web browser, which are probably set to a level that prevents local filesystem access for an internet site.

Security settings can be edited by users, in a way specific to each browser. for example for IE it's Tools -> Internet Options -> Security

How to display local images placed on client machine in HTML webpages

Web pages aren't allowed to access file:/// URLs for security reasons, there is no way around this. However, if you make the same files accessible via another protocol - this can work. For example, you can put the following line into your add-on's chrome.manifest file:

resource myaddon file:///C:/Images

This will create a resource protocol alias pointing to that directory - and the resource protocol can be used by webpages. Meaning that the pages will be able to use the image C:\Images\1.jpg as resource://myaddon/1.jpg.

You can also add resource protocol aliases dynamically. Just make sure you make only images accessible in this way and not all disk content - you might be opening a security hole otherwise.

how to display the image from a specified directory

In Apache typically you would create an alias that points to the specific folder location in your http.conf file. I've never used or even seen xampp but I guess there would be an equivilent method to do so in xampp?

Creating an alias in xampp

Generally one would put all files in the server root but over time you'll have multiple projects and thus duplicates. By using an alias style setup for various folders ( images, javascript, xml etc ) they can be easily accessed from whatever project is running on the webserver at the time.

    Alias /D_images "D:/path/to/images/"
    <Directory "D:/path/to/images">
        Options MultiViews
        AllowOverride None
        Order allow,deny
        Allow from all
    </Directory>

Then, once the server has been restarted, you could access the files contained in the target directory like:

<img src='/D_images/picture.jpg' />

---

Related Topics