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

google-chrome url pictures

111,566

Solution 1

you can convert the image to base-64 code, for example with "https://www.base64-image.de/" 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=='>

Solution 2

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

Follow these steps:

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"]}

Put this in your chrome address bar: chrome://extensions/
Make sure 'Developer mode' is checked (Top right of page)
Click the 'Load Unpacked Extension' button
Navigate to the local folder where the image(s) and the manifest.json file is, click ok
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.
Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID
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.

Solution 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.

Solution 4

in Chrome this looks like this

file:///C:/sample.txt

Solution 5

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

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
Use production ready server like nginx, apache

View more solutions

111,566

JSH

Updated on September 17, 2022

Comments

JSH over 1 year

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...
JSH over 13 years

I'm after doing something like this, hosted on web, but looking at a users local files.... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>example</title> </head> <body> <img src="file:///c:/graphics/image.jpg" height="200px" width="200px" /> <h1>Welcome</h1> <p>Hello world!</p> </body> </html>
Vaijnath Polsane over 13 years

I just tried .html and .jpg files with the file:/// notation, both were renderd correctly. Could you post a screenshot that shows the address bar and some of the content?
JSH over 13 years

try jsh.learningict.net - obviously the image you won't have but the code shows you an idea of what I'm after
Vaijnath Polsane over 13 years

I can only guess that you are referring to the image tag, which also works fine when i replace the src with <img src="file:///c:\test.jpg" height="200px" width="200px"> c:\test.jpg is a valid jpg in that path and shows fine.
JSH over 13 years

wonder if it is an osx thing then? the src ref works fine alone in Chrome's address bar, just not in the HTML code
user1686 over 12 years

@Thiago, OS X does not have a C:\ ...
Willem D'Haeseleer about 11 years

won't work for images
xenoid over 6 years

The question isn't about letting the internet at large access files on the local system.
Aimal Khan about 6 years

prefixing the URL with "file:///" helped me. Thanks!
Ravindra Bawane about 6 years

That doesn't appear to be at all what OP was asking, not even related. Please read questions carefully, and do not answer or comment unless you have relevant information to add.
Samuel Thompson over 5 years

But it is what i was looking for
Shayan over 4 years

I get this error on the console: "not allowed to load local recources"
Shayan over 4 years

I think chrome is dumb, I was trying on a about:blank page and it was not allowing it, I tired opening a local HTML file and it worked, even for images in spite of what @WillemD'Haeseleer said. My code was this: drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Casey over 3 years

Besides not answering the question it's not even factually correct. It may not be wise but you can let anyone access your filesystem.
Admin almost 2 years

That python tip is super useful, had no idea that was a thing!