PhoneGap on iOS with absolute path URLs for assets

Question

Porting a web app to phoneGap on iOS, we have asset (and ajax) URLs that are absolute paths, e.g.:

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

We have the img directory packaged under PhoneGap's www directory. The image will not load with the absolute path, but only with a relative path, e.g.:

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

Could someone please explain how the URL is being prefixed or translated in this context? I.e.:

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

does not work either. So what is the URL base used by PhoneGap on iOS?

We've also tried, e.g.:

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

but no go.

We would like to avoid changing the URLs to relative for the port, as absolute path URLs are used throughout the CSS, Ajax code, are set by Sprockets with the Rails backend, etc. How can we just get PhoneGap/UIWebView on iOS to load the assets using the absolute path URLs as written?

I see this question is asked a lot in various forms here on StackOverflow, but I've yet to see a correct answer.

Answer 1

Did some testing and maybe a bit of JavaScript hackery can make it a bit more manageable. This will change all <a> and <img> tags with URL starting with / to be relative to the current file.

Put this into a file and include it with a <script> tag or inject it with stringByEvaluatingJavaScriptFromString:

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 2

One can get the path to the application in JavaScript by:

cordova.file.applicationDirectory

Since I'm on Android, it says: "file:///android_asset/" ...for example:

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

Like this all resources would be found when cross-building for various platforms.

Answer 3

When checking the absolute path through your iPhone/iPad you would see something like this:

<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's actually a good idea to reference assets using absolute paths in this case.

As an alternative you could consider using the base64 strings in your CSS files:

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