PhoneGap en iOS con URL de ruta absoluta para activos?

Portando una aplicación web para phoneGap en iOS, tenemos URL de activos (y ajax) que son routes absolutas, por ejemplo:

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

Tenemos el directory img empaquetado en el directory www de PhoneGap. La image no se cargará con la ruta absoluta, sino solo con una ruta relativa, por ejemplo:

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

¿Podría alguien explicar por qué el prefijo o la traducción de la URL en este context? Es decir:

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

tampoco funciona Entonces, ¿cuál es la base de URL utilizada por PhoneGap en iOS?

También lo hemos intentado, por ejemplo:

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

pero sin ir.

Nos gustaría evitar cambiar las URL a relativo para el puerto, ya que las URL de ruta absoluta se utilizan en todo el CSS, el código Ajax, se establece con Sprockets con el backend de Rails, etc. ¿Cómo podemos hacer que PhoneGap / UIWebView en iOS se cargue ¿Los activos que usan las URL de ruta absoluta como están escritas?

Veo que esta pregunta se hace de varias forms aquí en StackOverflow, pero aún tengo que ver una respuesta correcta.

Uno puede get la ruta a la aplicación en JavaScript mediante:

 cordova.file.applicationDirectory 

Como estoy en Android, dice: "file: /// android_asset /" … por ejemplo:

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

De esta manera, todos los resources se encontrarían en la construcción cruzada para varias plataforms.

¿Algunas testings y tal vez un poco de piratería de JavaScript puede hacer que sea un poco más manejable? Esto cambiará todas las tags <a> y <img> con la URL que comienza con / para ser relativa al file actual.

Ponga esto en un file e stringByEvaluatingJavaScriptFromString: con una label <script> o stringByEvaluatingJavaScriptFromString: con 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]; } }); 

Al verificar la ruta absoluta a través de su iPhone / iPad, verá algo como esto:

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

Y será diferente en los Android con Android o Windows , así que no creo que sea una buena idea hacer reference a los activos utilizando routes absolutas en este caso.

Como alternativa, podría considerar utilizar las cadenas base64 en sus files CSS:

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