Cordova - отображение локальных файлов изображений в теге <img> - PullRequest
Новая
       13

Cordova - отображение локальных файлов изображений в теге <img>

0 голосов
/ 13 декабря 2018

У меня есть приложение Cordova (созданное на Ember.js с использованием аддона Corber), которое в настоящее время я использую только на iOS, в частности на симуляторе iOS (iPhone 8, iOS v12), поэтому оно использует WKWEBVIEW.

Приложение использует файловые плагины cordova для загрузки удаленных изображений и сохранения их на устройстве пользователя, в настоящее время в папке «Документы» (cordova.file.documentsDirectory), которая работает нормально, и я проверил, что изображения делаютна самом деле существуют там.Однако я не могу определить правильный URL / URI для использования для отображения этих изображений в приложении с помощью стандартных тегов <img>.

В собственной документации Cordova говорится о том, чтобы использовать путь протокола cdvfile:// (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#cdvfile-protocol),, но даже с соблюдением там инструкций (добавление мета-тега content-security в index.html, правило доступа кconfig.xml и т. д.), похоже, что WKWEBVIEW просто не поддерживает этот протокол, что выдает мне ошибки «неподдерживаемый URL» в консоли при попытке его использовать.

Другие ответы SO на эту темупредложить использовать обычный URL-путь относительно URL-адреса веб-сервера приложения Cordova, например, такие как <img src="/Library/NoCloud/path-to-my/file.jpg">, но любой путь, который я пробую 404.

Это похоже на такой простой / общий случай использования, но я в тупике.

1 Ответ

0 голосов
/ 13 декабря 2018

Я не работал с Cordova, но документы, которые вы связали, говорят следующее:

Чтобы использовать cdvfile в качестве тега 'src, вы можете преобразовать его в собственный путь с помощью метода toURL () разрешенного fileEntry,который вы можете получить через resolLocalFileSystemURL - см. примеры ниже.

И приводит это в качестве примера: 

resolveLocalFileSystemURL('cdvfile://localhost/temporary/path/to/file.mp4', function(entry) {
    var nativePath = entry.toURL();
    console.log('Native URI: ' + nativePath);
    document.getElementById('video').src = nativePath;

Учитывая все это, я бы сказал, что вы можете попытаться создатькомпонент, cdv-img.Что-то вроде этого должно работать, я думаю: 

import Component from '@ember/component';

export default Component.extend({
  tagName: 'img',
  cdvPath: undefined,
  didReceiveAttrs() {
    this._super(...arguments);
    if (this.cdvPath) {
      resolveLocalFileSystemURL(this.cdvPath, (entry) => {
        this.$().attr('src', entry.toURL());
      });
    }
  },
});

Используйте это так: 

{{cdv-img cdvPath='cdvfile://localhost/temporary/path/to/file.jpg'}}

UPD

Если это не работает с файловым протоколом, выможно попытаться преобразовать изображение в URL данных 

import Component from '@ember/component';

export default Component.extend({
  tagName: 'img',
  cdvPath: undefined,
  didReceiveAttrs() {
    this._super(...arguments);
    if (this.cdvPath) {
      const el = this.$();
      resolveLocalFileSystemURL(this.cdvPath, (entry) => {
        entry.file(function (file) {
          const reader = new FileReader();

          reader.onloadend = function() {
            el.attr('src', this.result);
          };

          reader.readAsDataURL(file);
        });
      });
    }
  },
});
...