Images not showing in PhoneGap Build application

Question

I have recently decided to start using PhoneGap Build to create apps using web technologies. Please note that I\'m using PhoneGap Build not PhoneGap and so I don\'t maintain

Answer 1

I found that both the other answers are correct. At least for me, the images must be in the root folder and the case in the HTML must match the actual image file name case.

I'm using Nomad, so I don't know if this is a Nomad problem in packaging the app or a PhoneGap problem.

Answer 2

I had problems with file name case sensitivity, after changing all the image file names to lower case, and referring the same by the same casing, everything started working fine.

Answer 3

I had a similar problem. My solution was to change image paths by removing the leading "/": /img/my_icon.png -> img/my_icon.png, then my in-app icons showed up. It looks like your paths are correct though.

Answer 4

May be relevant to devs using gulp to build their applications: if images aren't showing up, check out where the images are being placed within www after a gulp build.

In my case PhoneGap was searching for images in /www/css folder. Changing the clean and images tasks to reflect that solved my issue.

I was attempting to set a background-image with CSS; it works now using:

background-image: url("img/background.jpg")

Answer 5

I was able to fix it by just throwing the images into the root folder and linking to that. May not be the best solution but it works! Hope this helps any viewers. PhoneGap Build apps require the images to be in the root folder.

Answer 6

I had a problem with this when I was using media queries in CSS. I forgot to take into account that CSS image paths are relative to the stylesheet, not to the document. So in my case, my path became ../images/...