iOS Cordova将本地文件设置为img src

时间:2017-04-10 22:07:36

标签: ios html5 image cordova wkwebview

我正在使用Cordova File Plugin来获取磁盘上的文件。我想在我的应用程序中显示该文件,所以我有一些javascript要做:

image.src = imageFile.localURL;

但是我收到有关该网址不受支持的错误。我想这是因为cdvfile://前缀?

我也尝试过使用文件条目:

imageFileEntry.nativeURL
imageFileEntry.toInternalURL()

但没有运气。我得到一个关于无法加载本地资源或者不支持URL的错误。

在搜索此问题时,Google上有很多问题,但没有一个问题可以解决我的问题。我错过了一步吗?现在我正在做:

  1. 获取FileEntry
  2. 创建图片对象
  3. 将图像源设置为文件条目
  4. 中的文件路径

    我是否需要在设备上设置某种服务器来托管文件?使用另一个插件?我可能会缺少什么?

    关于我的设置的相关内容:

    • 我的应用正在使用WK Webview
    • 我在应用中加载网页,加载并运行代码以显示设备中的图像
    • 设备正在运行iOS 10.2

3 个答案:

答案 0 :(得分:1)

对于像我一样挣扎的任何人。对于cordova-ios 6.0.0+,还有一个解决方案,它不需要对我在绝望的日子里似乎找不到解决方案后发现的代码进行重大更改

需要2个步骤:

首先使用以下命令更新您的config.xml

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

然后使用未公开的方法转换file://链接

window.WkWebView.convertFilePath(filePath)

此方法执行到虚拟本地链接的转换,该链接使文件可访问并绕过WkWebView限制。这样的样本会更长一些

let localFile = cordova.file.dataDirectory + 'logo.png';
let convertedPath = window.WkWebView.convertFilePath(localFile);
document.getElementById("myImg").src = convertedPath;

答案 1 :(得分:0)

您是否尝试过使用toURL()方法?

尝试使用控制台记录输出,并确保获得类似的内容:

&#39;文件:///var/mobile.........'

我在iOS上的网址中也存在空格问题。

此致

答案 2 :(得分:0)

WKWebview只能在cordova.file.tempDirectoryfile:///var/mobile/Applications/Container/Data/<GUID of app>/tmp/)中显示img,因此需要将图像文件复制到tmp目录中才能显示。