I'm trying to preview a newly created image on an existing site. I'd like to be able to open up the Developer Tools (Inspector) in Firefox and edit the url for the background-image to my local file to get a quick preview of what it'd look like.
When I drag the file onto Firefox to open, it opens fine with this in the address bar:
file:///Users/ian/Desktop/format-BG.jpg
I copy that file path into my inspector: background-image: url(file:///Users/ian/Desktop/format-BG.jpg); but it doesn't load. Weirdly, when I click on the URL in the inspector, it opens the "unloadable" image in a new tab that has the exact same URL in the address bar but doesn't load.
Is this a security feature or something?
MacOs 11.4 (20F71) Firefox 89.0 (64-bit)
Yes, this is a security feature. Imagine, the browser would load the local files that way. Then JavaScript embedded in the page would also have access to that information.
Evil websites access the file system directly that way without any user interaction. Therefore, all browsers block access to files referenced via the file:// scheme.
Having said that, the behavior of how the file:// scheme should be handled is still not standardized (see https://github.com/whatwg/html/issues/3099). And therefore, different browsers treat local files referenced via the file:// scheme a little different.
Here are some links for further reading:
There seems to be a way to change that behavior, though, which is described in https://superuser.com/a/1513162.