30

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

Improve this question

8 Answers 8

Reset to default
17

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=='>
Improve this answer
1
  • 8
    This information may be of some use to somebody, but I think it doesn't really answer this question.
    – G-Man Says 'Reinstate Monica'
    Sep 9, 2014 at 17:02
15

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

  1. Put this in your chrome address bar: chrome://extensions/

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

  3. Click the 'Load Unpacked Extension' button

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

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

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

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

Improve this answer
1
  • Starting in January 2023 this manifest.json file will need to upgrade to manifest version 3, which changes the web_accessible_resources section like this: {"name": "File Exposer v2", "manifest_version": 3, "version": "2.0", "web_accessible_resources": [{"resources":[".jpg",".JPG"],"matches": [],"extension_ids": []}]}
    – Allen
    Nov 1, 2022 at 17:18
8

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.

Improve this answer
2
  • 2
    won't work for images
    – Willem D'Haeseleer
    Apr 26, 2013 at 19:00
  • 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";
    – Shayan
    Sep 25, 2019 at 8:53
4

in Chrome this looks like this 

file:///C:/sample.txt
Improve this answer
9
  • 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>
    – JSH
    Dec 21, 2010 at 15:29
  • 1
    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?
    – KutscheraIT
    Dec 21, 2010 at 15:34
  • try jsh.learningict.net - obviously the image you won't have but the code shows you an idea of what I'm after
    – JSH
    Dec 21, 2010 at 17:12
  • 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.
    – KutscheraIT
    Dec 21, 2010 at 17:19
  • 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
    – JSH
    Dec 22, 2010 at 9:50
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

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

  2. Use production ready server like nginx, apache

Improve this answer
1
  • That python tip is super useful, had no idea that was a thing!
    – Coldblackice
    Jun 4, 2022 at 6:36
3

My, what a difference ten years makes! Found this drop-dead-simple method at https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/

  1. Open the Chrome inspector preferences.

  2. Check "Enable Local Overrides."

  3. Locate the original image in the html.

  4. Right-click the file path, and choose "Locate in Sources Panel."

  5. With the image selected in the left panel of the Sources panel, drag the replacement image from your desktop and onto the preview panel on the right.

  6. As you hover, you'll see a dotted outline with the text "Drop image file here." Drop image file there. ;-)

  7. You may need to refresh the page for the new image to display. Yes, it will persist as long as the Inspector is open and "Local Overrides" is enabled.

NOTE: The file name will not change in the browser, but the new image will display where the original one displayed previously.

Improve this answer
0

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.

Improve this answer
2
  • 1
    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.
    – music2myear
    Mar 23, 2018 at 18:28
  • 1
    But it is what i was looking for
    – Samuel Thompson
    Sep 12, 2018 at 18:06
-1

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.

Improve this answer
2
  • 4
    The question isn't about letting the internet at large access files on the local system.
    – xenoid
    Aug 9, 2017 at 13:06
  • Besides not answering the question it's not even factually correct. It may not be wise but you can let anyone access your filesystem.
    – Casey
    Jan 4, 2021 at 22:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .