Cordova + cordova-ios 6.1.0 - 加载本地图像答案

【问题标题】：Cordova + cordova-ios 6.1.0 - load local imageCordova + cordova-ios 6.1.0 - 加载本地图像
【发布时间】：2020-09-09 15:15:20
【问题描述】：

我有一个在使用cordova-ios 6.x 之前运行良好的cordova 应用程序。

这个应用程序将几个图像下载到 cordova.file.dataDirectory 以供离线访问....到目前为止，除了使用本地网络服务器插件之外，我还没有找到显示此图像的方法。

是否有任何其他内置方式可以允许从 cdvfile 方案中提供内容？ [我需要设置一个 img src] 因为可能有很多图像，转换为 base64 对我来说不是一个选项。

任何帮助表示赞赏

【问题讨论】：

标签： cordova wkwebview cordova-ios cordovawebview

【解决方案1】：

对于任何像我一样挣扎的人。有一个解决方案，不需要对代码进行重大更改。

需要两个步骤：

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

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

然后使用未记录的方法转换您的 file:// 链接

window.WkWebView.convertFilePath(filePath)

此方法执行转换为虚拟 localhost 链接，使文件可访问并绕过 WkWebView 限制。稍微长一点的样本是这样的

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

【讨论】：

这为我节省了很多割草的时间！ “window.WkWebView.convertFilePath”非常有帮助。我已经把这个 WKWebView 更新关闭了很长时间，正是因为我预计这会很痛苦。你的帖子给了我很大的帮助，谢谢！

【解决方案2】：

在与它斗争了几天之后，我找到的解决方案是不使用cdvfile:// 在 iOS 上提供文件。 WkWebView 真的不好用。

但是，WkWebView 可以很好地从本机 file:// 协议加载资产，因此您可以使用以下方法将 cdvfile:// 转换为：

const resolveIosPath = (path) => new Promise((resolve, reject) => {
  window.resolveLocalFileSystemURL(path, entry => {
    resolve(window.WkWebView.convertFilePath(entry.toURL())
  },
  reject
)

要使用它，只需通过该方法运行路径并将结果应用于src 属性：

// With async/await
const img = document.createElement("img")
img.src = await resolveIosPath("cdvfile://images/logo.png")
document.body.appendChild(img)

// With Promise chain
resolveIosPath("cdvfile://images/logo.png").then((src) => {
  const img = document.createElement("img")
  img.src = src
  document.body.appendChild(img)
})

// With synchronous img mount, but src added asynchronously
const img = document.createElement("img")
document.body.appendChild(img)
resolveIosPath("cdvfile://images/logo.png").then((src) => {
  img.src = src
})

如果您不喜欢异步执行所有这些操作，您可以在应用初始化期间的某个时间保存根目录：

// Storing on `window` just as an example, the point is to make it globally available
window.cacheRoot = await resolveIosPath("cdvfile://")

...然后你可以像这样同步使用它：

const img = document.createElement("img")
img.src = window.cacheRoot + "logo.png"
document.body.appendChild(img)

【讨论】：