ios - 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”。它的 native 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://网址。

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> 中使用此 schemeUrl src 标签。