cdvfile:// 不受支持的 URL 错误

Question

问题：

在我的应用程序中，我想通过 cordova wkwebview 访问图像。 HTML 元素如下所示。

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

加载此内容时，我收到错误“加载资源失败：不支持的 URL”。 我正在使用 iOS 10.2。

已验证/尝试过的事情：

如果选中文件夹“MyFolder”下的“cordova.file.dataDirectory”中存在的文件列表，我确实看到那里存在“file.jpg”。它的本机 URL 为 file:///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:// 路径的方式不正确吗？

更新

我遇到了一个链接（忘记捕获它）说 webview 需要相对路径，因此 cdvfile:// 不起作用。我试图将图像源更改为相对路径，方法是将其更改为“../../../../../../../../..//var/mobile/Containers/ Data/Application/app-id/Library/NoCloud/MyFolder/file.jpg”，我现在可以看到一个新错误 - “加载资源失败：操作无法完成。操作不允许”

我可以通过“读取”文件的内容并将 base64 数据作为图像源传递来使图像正常工作。但这不是应该的，不是吗？

Answer 1

如果您使用最新的 ios 平台 (cordova-ios@6.x.x)，您可以使用方案和主机名选项：

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

你可以在你的<img> src 标签中使用这个 schemeUrl。

Answer 2

Future参考，用最新的WKWebView，直接设置src属性失败。

我发现加载图像的唯一方法是这样的：

    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 (reader.result) {
                        var elem = document.getElementById(imgElement);
                        var blob = new Blob([new Uint8Array(reader.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 web 服务器，然后通过http://localhost 访问它...

很遗憾，“cdvfile”不适用于 WKWebView。