cdvfile不支持的URL错误://

Question

问题：

在我的应用程序中，我想通过cordova wkwebview访问图像。超文本标记语言元素如下所示。

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

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

验证/尝试的事情:

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

使现代化

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

我可以通过“读取”文件的内容并将base64数据作为图像源传递，使图像正常工作。但事实并非如此，对吗？

Answer 1

如果您使用的是WKWebView，您只能选择设置本地超文本传输协议Web服务器，然后通过http://localhost访问它...

不幸的是，“cdvfile”不适用于WKWebView。

Answer 2

为了将来参考，对于最新的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

如果您使用最新的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://..."
});

您可以使用此方案Url在你是你的