Неподдерживаемая ошибка URL для cdvfile://

Question

Проблема:

В моем приложении я хочу получить доступ к изображению через cordova wkwebview. Элемент HTML выглядит следующим образом.

<img src="cdvfile://localhost/library-nosync/MyFolder/file.jpg">

При загрузке я получаю сообщение об ошибке "Не удалось загрузить ресурс: неподдерживаемый URL". Я работаю с iOS 10.2.

Вещи проверены / проверены:

Если проверен список файлов, находящихся в "cordova.file.dataDirectory" в папке "MyFolder", я вижу там "file.jpg". Он имеет собственный URL-адрес в виде файла: ///var/mobile/Containers/Data/Application/app_id/Library/NoCloud/MyFolder/file.jpg.

Я добавил "img-src 'self' cdvfile:" в Content-Security-Policy.

Я добавил следующее в config.xml

<access origin="cdvfile://*" /> 
<allow-navigation href="cdvfile://*" /> 
<allow-intent href="cdvfile://*" />
<preference name="iosPersistentFileLocation" value="Compatibility" />
<preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />

В URL нет специальных (не ASCII) символов, как указано в темах, связанных с этой ошибкой. Что еще может быть причиной "Неподдерживаемый URL"?

Способ доступа к cdvfile:// путь неверен?

Обновить

Я наткнулся на ссылку (забыл ее перехватить), в которой говорится, что для веб-просмотра нужен относительный путь, и поэтому cdvfile:// не будет работать. Я попытался изменить источник изображения на относительный путь, изменив его на "../../../../../../../../..//var/mobile/Containers/ Data / Application / app-id / Library / NoCloud / MyFolder / file.jpg ", и теперь я вижу новую ошибку -" Не удалось загрузить ресурс: операция не может быть завершена. Операция не разрешена "

Я мог заставить изображение работать, "читая" содержимое файла и передавая эти данные base64 в качестве источника изображения. Но так не должно быть?

Answer 1

Если вы используете новейшую платформу ios ([e-mail]), вы можете использовать параметры схемы и имени хоста:

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

Затем вы должны получить и использовать schemeUrl (app://) вместо cdvfile:// или же file:// URL.

var cdvfileUrl = "cdvfile://localhost/library-nosync/MyFolder/file.jpg";

// Convert to native url
window.resolveLocalFileSystemURL(cdvfileUrl, function(entry) {
    var nativeUrl = entry.toNativeURL(); // will be "file://...."

    // Use nativeUrl to get scheme friendly url
    var schemeUrl = window.WkWebView.convertFilePath(nativeUrl);  // Will be "app://..."
});

Вы можете использовать эту schemeUrl в своем <img> src тег.

Answer 2

For Future reference, with the latest WKWebView, the direct setting of the src attribute fails.

Only way I've found to load the image is something like this:

    function loadImageFromFile(filename, imgElement) {
        // filename is cdvfile:....... (string)
        // imgElement is target IMG element name (string)
        window.resolveLocalFileSystemURL(filename, function success(fileEntry) {
            fileEntry.file(function (file) {
                var reader = new FileReader();
                reader.onloadend = function() {
                    if (this.result) {
                        var elem = document.getElementById(imgElement);
                        var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                        elem.src = window.URL.createObjectURL(blob);
                        window.URL.revokeObjectURL(blob);
                    }
                };
                reader.readAsArrayBuffer(file);
            });
        }, function () {
            console.log("File not found: ");
        });
    }

Answer 3

Если вы используете WKWebView, есть только вариант, который вы настраиваете локальный http веб-сервер и затем получаете к нему доступ через http://localhost/...

К сожалению, "cdvfile" не работает для WKWebView.