How To Display Local Images Placed On Client Machine In HTML Webpages

How to display local images placed on client machine in HTML webpages hosted on a webserver I'm having few images placed in C:/Images folder so path should be something file:///C:/

Solution 1:

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.

Solution 2:

Use the File API which works on all browsers except IE.

A simple example of this would be:

function ShowImage(filepath){
    var reader=new FileReader(); // File API object
    reader.onload=function(event){
        document.getElementById('myimage').src = event.target.result;
    }
    reader.readAsDataURL(filepath);
}

Solution 3:

the src attribute is always in the context of the server that is serving the HTML content. I don't think there is a way around that.

So in your example <img src="file:///C:/Images/1.jpg" /> if the host is ip 1.1.1.1 and the client is ip 2.2.2.2

then src would be pointing to 1.1.1.1\file://C:/images/1.jpg <--that's an example not a real protocol.