Можно ли найти локальный файловый ресурс в <img>?

Мне нужно указать мои теги изображений на каталог, который не является частью моего приложения.

Сценарий использования - это приложение для киоска, для которого ресурсы доставляются через Dropbox. Таким образом, пользователю нужно будет настроить приложение, указав объект fileSystem в требуемом каталоге Dropbox, а затем приложение будет использовать этот каталог для получения своего носителя.

Файловая система Entry возвращает путь, который выглядит следующим образом:~/Dropbox/and/so/on/and/so/forth

Я пытаюсь выяснить, есть ли способ использовать это явно а-ля

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

или через какую-то хакерскую альтернативу, например

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

Однако все различные комбинации, которые я пробовал, приводят к повреждению изображения - даже если я проверяю элемент и щелкаю по нему в консоли, Chrome может просматривать изображение как отдельную сущность, поэтому я знаю, что путь правильный.

Я чувствую, что пропускаю что-то очевидное, но не могу найти никакой документации о том, как правильно направить мои ресурсы в файловую систему.

Источник

3 ответа

Решение

Вы ожидаете, что fileEntry.toURL() метод возвращает filesystem:.. -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 и т. д., чтобы получить блоб:-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 -->

Создайте каталог, который содержит "путь / к /img.png", загрузите приложение, запустите приложение и нажмите на только что созданный каталог, который содержит это изображение. Вы увидите, что изображение встроено в документ приложения.

Источник

Вы не используете file:// URL и не используете никаких исключений --allow.... Получив FileEntry, вы извлекаете двоичные данные из изображения и формируете их в URL-адрес данных, который вы можете использовать непосредственно в качестве img src. Посмотрите мой ответ на этот вопрос: доступ к образу приложения в Chrome

ОБНОВЛЕНИЕ: Учитывая объект File (файл), вот код для установки свойства src изображения (img):

img.src = webkitURL.createObjectURL(file);

Если у вас есть FileEntry, вы можете получить его File с помощью метода file().

Источник

Есть активы в Dropbox пользователя или у вас? Если они ваши, вы сможете получить их с помощью fetch, сделав их общедоступными.

Источник
Другие вопросы по тегам