11

Problem:

In my app, I want to access an image through cordova wkwebview. The HTML element looks as follows.

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

While loading this, I get error "Failed to load resource: unsupported URL". I am working with iOS 10.2.

Things verified/tried:

If list of files present in "cordova.file.dataDirectory" under folder "MyFolder" is checked, I do see the "file.jpg" present there. It has the native URL as file:///var/mobile/Containers/Data/Application/app_id/Library/NoCloud/MyFolder/file.jpg.

I have added "img-src 'self' cdvfile: " to the Content-Security-Policy.

I have added following in the 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" />

There are no special (non-ASCII) characters in the URL as mentioned in threads relating to this error. What else could be the reason of "Unsupported URL"?.

Is the way I am accessing cdvfile:// path incorrect?

Update

I came across a link (forgot to capture that) saying the webview needs relative path and hence cdvfile:// would not work. I tried to change the image source to a relative path by changing it to "../../../../../../../../..//var/mobile/Containers/Data/Application/app-id/Library/NoCloud/MyFolder/file.jpg" and I could now see a new error - "Failed to load resource: The operation couldn’t be completed. Operation not permitted"

I could get the image working by "reading" the contents of the file and passing that base64 data as image source. But that is not how it should be, should it?

4

3 回答 3

6

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

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

然后您应该获取并使用schemeUrl ( app://) 而不是cdvfile://or 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。

于 2020-11-06T03:03:15.567 回答
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: ");
        });
    }
于 2020-08-26T03:36:56.410 回答
1

如果您使用 WKWebView，则只能选择设置本地 http Web 服务器，然后通过http://localhost ...

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

于 2017-10-19T10:54:18.770 回答