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

Question

我有一个 cordova 应用程序，在使用 cordova-ios 6.x.

之前运行良好

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

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

感谢任何帮助

Answer 1

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

需要 2 个步骤：

首先使用以下

更新您的config.xml

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

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

window.WkWebView.convertFilePath(filePath)

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

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

Answer 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)

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

Cordova + cordova-ios 6.1.0 - load local image

cordova

wkwebview

cordova-ios

cordovawebview