是否可以在 <img>？

Question

我有一个需要指向我的图像标签在一个目录，不是我的应用程序的一部分。

用例是，这是一个kiosk应用程序，其资产通过Dropbox交付。因此，用户需要通过将fileSystem对象指向所需的Dropbox目录来配置应用程序，然后应用程序将使用该目录来获取其媒体。

文件系统Entry返回的路径如下所示:~/Dropbox/and/so/on/and/so/forth

我想弄清楚是否有任何方法可以明确地使用它la

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

或者通过一些不太合适的替代方式，比如

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

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

我觉得我忽略了一些明显的东西，但找不到任何关于如何正确地将资源瞄准文件系统的文档。

Answer 1

您期望fileEntry.toURL()方法返回filesystem:.. -URL，该url可用于直接在页面中嵌入图像。然而，由于http://crbug.com/148788，情况并非如此。

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

// 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()创建)枚举目录中的项，或者直接提示FileEntry(并使用fileEntry.file等，以获得blob:-URL)。

要尝试前面的代码片段，使用以下代码作为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 -->

创建一个包含"path/to/img.png"的目录，加载应用程序，启动应用程序并点击刚刚创建的包含该图片的目录。你会看到图像嵌入到应用程序的文档中。

Answer 2

不使用file://URL，也不使用任何——allow…例外。一旦有了FileEntry，就可以从图像中获取二进制数据，并将其形成一个数据URL，可以直接将其用作img src。查看我对这个问题的回答:chrome打包应用程序图像访问

UPDATE:给定一个File对象(File)，下面是设置图像(img)的src属性的代码:

img.src = webkitURL.createObjectURL(file);

如果你有一个FileEntry，你可以通过File()方法获得它的File。

Answer 3

资产是在用户的Dropbox还是你的?如果它们是你的，你应该能够在将它们设为public后使用fetch获取它们。