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

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 2

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];   } });