Question

问题：

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

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

加载时，我收到错误＆＃34;无法加载资源：不支持的URL＆＃34;。我正在使用iOS 10.2。

经过验证/尝试过的事情：

如果＆＃34; cordova.file.dataDirectory＆＃34;中存在的文件列表在文件夹＆＃34; MyFolder＆＃34;检查，我确实看到＆＃34; file.jpg＆＃34;在那里。它具有本机URL 文件：///var/mobile/Containers/Data/Application/app_id/Library/NoCloud/MyFolder/file.jpg

我添加了＆＃34; img-src＆＃39; self＆＃39; cdvfile：＆＃34;内容安全政策。

我在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）字符，如与此错误相关的线程中所述。还有什么可能是＆＃34;不支持的网址＆＃34;？。

我访问cdvfile：//路径的方式不正确吗？

更新

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

我可以通过＆＃34;阅读＆＃34;文件的内容并将该base64数据作为图像源传递。但那应该是怎么回事，不是吗？

Answer 1

对于以后的参考，使用最新的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 2

如果您使用的是WKWebView，则只能选择设置本地http网络服务器，然后通过http://localhost访问它...

不幸的是＆＃34; cdvfile＆＃34;不适用于WKWebView。

Answer 3

如果您使用最新的ios平台（cordova-ios@6.x.x），则可以使用scheme和主机名选项：

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

然后，您应该获取并使用 schemeUrl （app://）而不是cdvfile://或file://网址。

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。

cdvfile：//

3 个答案: