iOS 上的 PhoneGap 是否具有资产的绝对路径 URL？

Question

将Web应用程序移植到iOS上的phoneGap，我们拥有绝对路径的资产（和ajax）URL，例如：

<img src="/img/logo.png">

我们将img目录打包在PhoneGap的www目录下。图像不会使用绝对路径加载，而只会使用相对路径加载，例如：

<img src="img/logo.png">

有人可以解释一下在此上下文中如何为 URL 添加前缀或翻译吗？即：

<img src="/www/img/logo.png">

也不起作用。那么 iOS 上 PhoneGap 使用的 URL 基是什么？

我们也尝试过，例如：

<img src="file://img/logo.png">
<img src="file:///img/logo.png">

但没有成功。

我们希望避免将端口的 URL 更改为相对路径，因为绝对路径 URL 在整个 CSS、Ajax 代码中使用，由带有 Rails 后端的 Sprockets 设置等。我们如何才能在 iOS 上加载 PhoneGap/UIWebView使用绝对路径 URL 的资源如所写？

我看到这个问题在 StackOverflow 上以各种形式被问到很多，但我还没有看到正确的答案。

Answer 1

人们可以通过以下方式在 JavaScript 中获取应用程序的路径：

cordova.file.applicationDirectory

由于我使用的是 Android，因此它显示：“file:///android_asset/” ...例如：

var img_path = cordova.file.applicationDirectory + 'www/img/logo.png';

像这样，在交叉构建各种资源时会找到所有资源平台。

Answer 2

做了一些测试，也许一些 JavaScript hacking 可以使它更易于管理。这会将 URL 以 / 开头的所有 和 标记更改为相对于当前文件。

将其放入文件中，并将其包含在

document.addEventListener("DOMContentLoaded", function() {
  var dummy = document.createElement("a");
  dummy.setAttribute("href", ".");
  var baseURL = dummy.href;
  var absRE = /^\/(.*)$/;

  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = absRE.exec(img.getAttribute("src"));
    if (groups == null) {
      continue;
    }

    img.src = baseURL + groups[1];
  }

  var links = document.getElementsByTagName("a");
  for (var i =  0; i < links.length; i++) {
    var link = links[i];
    var groups = absRE.exec(link.getAttribute("href"));
    if (groups == null) {
      continue;
    }

    link.href = baseURL + groups[1];
  }
});

Answer 3

当通过 iPhone/iPad 检查绝对路径时，您会看到类似这样的内容：

<img src="file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/logo.png" />

And it will be different on Android or Windows devices so I don't think it is 实际上在这种情况下，使用绝对路径引用资源是个好主意。

作为替代方案，您可以考虑在 CSS 文件中使用 base64 字符串：

div#overview
{
    background-image: url('data:image/jpeg;base64, <IMAGE_DATA>');
    background-repeat: no-repeat;
}

Answer 4

在离子 5 / 角度 12 中我有
this.file.applicationDirectory+'/www/assets/pdf/my.pdf'
它适用于我的应用程序
https://ionicframework.com/docs/native/file
https://ionicframework.com/docs/native/document-viewer。