Is it possible to source a local file resource in an <img>? - google-chrome-app

Question

I have a need to point my image tags at a directory that is not part of my app.
The use-case is that this is a kiosk app for which the assets are delivered via Dropbox. So, the user will need to configure the app by pointing the fileSystem object at the required Dropbox directory and then the app will use that directory to source its media.
The fileSystem Entry returns a path that looks like:
~/Dropbox/and/so/on/and/so/forth
I'm trying to figure out if there's any way to use that either explicitly
a la
<img src="~/Dropbox/and/so/on/and/so/fort/image.png"/>
or via some hacky alternative like
<img src="file:///users/someuser/Dropbox/and/so/on/and/so/forth"/>
However all the various combinations I've tried produce a broken image - even though when I inspect the element and click on it in the console Chrome is able to view the image as a stand-alone entity, so I know the path is correct.
I feel like I'm overlooking something obvious, but can't find any documentation for how to correctly aim my resources at the file system.

Answer 1

You'd expect that the fileEntry.toURL() method returns the filesystem:..-URL that can be used to directly embed the image in the page. However, that is not the case because of http://crbug.com/148788.
If you're certain that you can always access the filesystem after requesting permissions, the most efficient solution to embed an image from the user's filesystem is to use blob:-URLs. Here is an example without any error handling:
// Within your app's code, somehow get a DirectoryEntry (or FileEntry):
chrome.fileSystem.chooseEntry({
type: 'openDirectory'
}, function(directoryEntry) {
// Assume that the user has selected the directory containing the images.
directoryEntry.getFile('path/to/img.png', function(fileEntry) {
fileEntry.file(function(file) {
var url = URL.createObjectURL(file);
// url looks like "blob:chrome-extension%3A//[extensionid]/[uuid]"
var img = new Image();
img.src = url;
document.body.appendChild(img);
});
});
});
If you don't know the image path in advance, then you could either enumerate the items in the directory using a DirectoryReader (created using directoryEntry.createReader()), or directly prompt for the FileEntry (and use fileEntry.file, etc., to get the blob:-URL).
To try out the previous snippet, use the following as manifest.json
{
"name": "FS App",
"version": "2",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
{"fileSystem": ["directory"]}
]
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html');
});
main.html
<script src="main.js"></script> <!-- main.js = previous code -->
Create a directory that contains "path/to/img.png", load the app, launch the app and click on the just-created directory that contains that picture. You will see that the image is embedded in the app's document.

Answer 2

You don't use a file:// URL, nor do you use any --allow... exceptions. Once you have a FileEntry, you fetch the binary data from the image and form it into a data URL, which you can use directly as an img src. See my answer to this question: chrome packaged app image access
UPDATE: Given a File object (file), here's the code to set the src property of an image (img):
img.src = webkitURL.createObjectURL(file);
If you have a FileEntry, you can get its File via the file() method.

Answer 3

Are the assets in the user's Dropbox or yours? If they are yours, you should be able to get them using fetch after making them public.