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 native APIs.

I use HTML img tags for displaying images of course and I'm having some trouble. The images display nicely in a browser but when I take it to my phone they just disappear. I've tried everything: checking case and spelling. I even tried uploading the images to my website server and nothing.

Any help on this will be greatly appreciated.

UPDATE

I use this HTML, It's a JavaScript string as that's how I input it during runtime:

"<p id=\"calculator\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Calculator</span></p><hr><p id=\"distance\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Distance Converter</span></p><hr><p id=\"area\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Area Converter</span></p><hr><p id=\"volume\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Volume Converter</span></p><hr><p id=\"mass\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Mass Converter</span></p><hr><p id=\"force\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Force Converter</span></p><hr><p id=\"power\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Power Converter</span></p><hr><p id=\"energy\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Energy Converter</span></p><hr><p id=\"temperature\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Temperature Converter</span></p><hr><p id=\"dataStorage\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Data Storage Converter</span></p><hr><p id=\"time\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Time Converter</span></p><hr><p id=\"speed\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Speed Converter</span></p><hr><p id=\"acceleration\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Acceleration Converter</span></p><hr><p id=\"pressure\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Pressure Converter</span></p><hr><p id=\"density\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">Density Converter</span></p><hr><p id=\"any\"><img id=\"images\" src=\"images/[e-mail]\"><span id=\"converterTitles\">The \"Any\" Converter</span></p><hr><p id=\"angle\"><img id=\"images\" src=\"images/Angle.png\"><span id=\"converterTitles\">Angle Converter</span></p><hr>"

It's filed with skip characters so it might be hard to read. But you get the gist. The simplest tags don't work. I have some CSS that does some background images using url() that also doesn't show.

Answer 1

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 2

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 3

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 4

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/...

Answer 5

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 6

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.