How to display local images in Chrome using file:// protocol?

Question

I'd like to be able to specify a local file path for an image on a web page delivered via http using Chrome - is this possible?

I remember doing this using IE but cannot remember how! Some trusted settings I think...

Answer 1

you can convert the image to base-64 code, for example with "http://duri.me/" and copy the result to browser! Like:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

Answer 2

Since you mentioned 'Chrome', you could use Chrome extensions to do this, to enable local access to your files.

Follow these steps:

1) In the local folder where your image(s) are, create this file called 'manifest.json' and enter this:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Put this is your chrome address bar: chrome://extensions/

3) Make sure 'Developer mode' is checked (Top right of page)

4) Click the 'Load Unpacked Extension' button

5) Navigate to the local folder where the image(s) and the manifest.json file is, click ok

6) The extension 'File Exposer' should now be listed in the list, and have a check mark against 'Enabled'. If the folder is on a network drive or other slow drive or has lots of files in, it could take 10-20 seconds or more to appear in the list.

7) Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID

8) Now in your HTML you can access the file with the following, changing the 'EXTERNSION_ID' to whatever ID your extension generated:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Note, that the *.jpg is recursive and it will automatically match files in the specified folder and all sub folders, you dont need to specify for each sub folder. Also note, its Case Sensitive.

In the 'img' tag you dont specify the original folder, its relative from that folder, so only sub folders need to be specified.

If you modify the manifest.json file, you will need to click the 'Reload (Ctrl+R)' link next to the extension.

Answer 3

Non-local web pages cannot access local files in Chrome or any modern web browser.

You can override this using LocalLinks (for Firefox), but it will only work in your own machine.

Answer 4

If you want to test local image on the live site you can run local web server and set URL like http://127.0.0.1:8123/img.jpg on page using DevTools

There is different ways to run a web server: 1. Extension for browser "Web Server for Chrome" with defined folder https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

2. If you have python then run embedded http server at chosen folder

   python3 -m http.server 8123 # python 3 version
   python -m SimpleHTTPServer 8123 # python 2 version

3. Use production ready server like nginx, apache

Answer 5

in Chrome this looks like this

file:///C:/sample.txt

Answer 6

In my case, I only needed to see what one small image change would look like in different responsive sizes. It was easiest to Save as... a complete webpage to the desktop and then open that instead. I inspect and edit the image src.

Answer 7

Okay, you can't just let somebody else acess your local file system! You would need a server-service like Apache, let your computer run 24h a day, make sure it wont overheat, care for good security and much more to make that even possible. And because server-administration is expensive and time-consuming, most people let the pro's host our stuff for us (Webhosting).

In conclusion, if you don't want to run your own server, it's much easier to just upload it to your webhoster of choice.