Absolute vs relative paths in app builds

1

Having found some issues using relative paths to reference external library files in my app, I thought I’d got everything fixed by ensuring the app used absolute paths.

However, I’ve found that the splash screen, icons and all images inside the app don’t display because they too are using a relative path. Here’s a screenshot from my chrome debug of a Genymotion virtual device: http://puu.sh/jB54v/bfa7b62246.png

And here’s a snippet of the generated config.xml file that’s created during the build process:

  <platform name="android">
     <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
     <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
   ...
     <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
     <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
   ...
  </platform>

As you can see in the screenshot, the app thinks the paths are relative and therefore can’t find the required files. How can I ensure the icon, splash and image files gets picked up and correctly displayed in the app?

2

have you used ionic resources? it creates the files and update config.xml

3

Yup. I created my own icons and splash screen, ran ionic resources in terminal.

Still paths are broken.

I’ve also tried building with the new lab app.

In summary; in browser and inside ionic lab (server) the icon, splash screen and internal images all display fine.
In ionic lab (emulate and run) and in ionic view, the icon, splash screen and internal images are all broken.

4

I don’t use GenyMotion, I use only browser and real device, the only issue I got with ionic resource is that the paths in config.xml were using backslahes so maybe there is an issue specific with GenyMotion, have you same issue on real device (the build is a little bit different) ?

5

Genymotion is just a virtualbox. I’ve also tested inside Ionic View on real devices and the iOS simulator inside Ionic lab. All have broken images.

6

Found the problem! I was using paths like this in my html:

<img ng-src="/img/logo/png"/>

…which works fine in browser. Not so much in the built app.

You must use:

    <img ng-src="img/logo/png"/>

Note the omitted first ‘/’

#facepalm :smiley: