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

Posted 2023-04-24

【中文标题】cdvfile:// 不受支持的 URL 错误

【英文标题】：Unsupported URL error for a cdvfile://

【发布时间】：2017-08-03 06:40:48

【问题描述】：

问题：

在我的应用程序中，我想通过 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 数据作为图像源传递来使图像正常工作。但这不是应该的，不是吗？

【问题讨论】：

是的，访问 cdvfile:// 路径是不正确的做法。因为浏览器不理解 cdvfile:// 协议。

您的意思是cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/… 部分不正确吗？

我也有同样的问题....

@DarkNeuron - 不是真的。 cdvfile:// 不适用于 WKWebView - 检查issues.apache.org/jira/browse/CB-10141 只有两种已知的方法可以使其正常工作 1. 创建本地 http 服务器并使用 localhost 2. 以 base64 格式读取文件内容并将其用作 src。我知道这两种选择都非常糟糕，但这就是我今天所知道的。

我遇到了这个答案：***.com/questions/32546965/… 还没有成功，但我充满希望。

【参考方案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。

【讨论】：

我收到了 toNativeURL 的弃用警告，但只有 toURL 为我工作，谢谢

【参考方案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: ");
        );
    

【参考方案3】：

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

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