Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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

share|improve this question

4 Answers 4

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.

share|improve this answer
2  
won't work for images –  Willem D'haeseleer Apr 26 '13 at 19:00

in Chrome this looks like this

file:///C:/sample.txt
share|improve this answer
    
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 '10 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? –  Weltenwanderer Dec 21 '10 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 '10 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. –  Weltenwanderer Dec 21 '10 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 '10 at 9:50

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=='>
share|improve this answer
    
This information may be of some use to somebody, but I think it doesn't really answer this question. –  G-Man Sep 9 at 17:02

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.