Test Local Background Image on Live Site with Chrome Dev Tools?

Solution 1:

Here is the answer, courtesy of Rob Donovan @ superuser (via https://superuser.com/a/839500/454034)

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 'EXTENSION_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 don't 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 2:

Another option would be to start a simple http server.

In your terminal (or command prompt), cd into the directory where your images are saved and then type python -m SimpleHTTPServer for Python 2.

For Python 3 use the following command: python -m http.server [<portNo>]

Now you can reference the images in dev tools using http://localhost:8000/filename.jpg.

Solution 3:

This is not an exact answer to your question, but one way you could do it is to use something like dropbox public folder. Once the image is in the folder you can just right click and copy a public url to use in the dev tools.

Solution 4:

I think the best and simplest solution is to convert your image into Base64 (you can use any online/offline tool for that) and then just paste the output inside DevTools.

If you need it in an IMG tag, do it like that:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

If you need it as a background image, you can do it like that:

.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==");
}