Question

我需要将我的图片标记指向不属于我的应用的目录。

用例是这是一个自助服务终端应用，资产通过Dropbox传送。因此，用户需要通过将fileSystem对象指向所需的Dropbox目录来配置应用程序，然后应用程序将使用该目录来获取其媒体。

fileSystem Entry返回如下所示的路径： ~/Dropbox/and/so/on/and/so/forth

我正在试图弄明白是否有任何方法可以明确地使用它 a la

<img src="~/Dropbox/and/so/on/and/so/fort/image.png"/>

或通过一些像

这样的hacky替代品

<img src="file:///users/someuser/Dropbox/and/so/on/and/so/forth"/>

然而，我尝试过的所有各种组合都会产生破碎的图像 - 即使我检查元素并在控制台中单击它时Chrome也能够将图像视为独立实体，因此我知道路径是对的。

我觉得我忽略了一些显而易见的事情，但是找不到任何关于如何正确地将我的资源用于文件系统的文档。

Answer 1

您不使用file：// URL，也不使用任何--allow ...例外。获得FileEntry后，从图像中获取二进制数据并将其形成数据URL，您可以直接将其用作img src。请参阅我对此问题的回答：chrome packaged app image access

更新：给定一个File对象（文件），这里是设置图像的src属性的代码（img）：

img.src = webkitURL.createObjectURL(file);

如果您有FileEntry，可以通过file（）方法获取其文件。

Answer 2

您希望fileEntry.toURL()方法返回filesystem:.. - 可用于直接在页面中嵌入图片的网址。但是，由于http://crbug.com/148788，情况并非如此。

如果您确定在请求权限后始终可以访问文件系统，那么从用户的文件系统嵌入图像的最有效解决方案是使用blob: - URL。这是一个没有任何错误处理的例子：

// 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);
        });
    });
});

如果您事先不知道图像路径，那么您可以使用DirectoryReader（使用directoryEntry.createReader()创建）枚举目录中的项目，或直接提示{{1 （并使用FileEntry等来获取blob：-URL）。

要试用上一个代码段，请使用以下fileEntry.file

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

创建一个包含“path / to / img.png”的目录，加载应用程序，启动应用程序并单击包含该图片的刚创建的目录。您将看到图像嵌入在应用程序的文档中。

Answer 3

用户的Dropbox中的资产或您的资产？如果他们是你的，你应该能够在公开之后使用fetch来获取它们。

是否可以在<img/>中获取本地文件资源？

3 个答案: