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/[email protected]\"><span id=\"converterTitles\">Calculator</span></p><hr><p id=\"distance\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Distance Converter</span></p><hr><p id=\"area\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Area Converter</span></p><hr><p id=\"volume\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Volume Converter</span></p><hr><p id=\"mass\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Mass Converter</span></p><hr><p id=\"force\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Force Converter</span></p><hr><p id=\"power\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Power Converter</span></p><hr><p id=\"energy\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Energy Converter</span></p><hr><p id=\"temperature\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Temperature Converter</span></p><hr><p id=\"dataStorage\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Data Storage Converter</span></p><hr><p id=\"time\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Time Converter</span></p><hr><p id=\"speed\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Speed Converter</span></p><hr><p id=\"acceleration\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Acceleration Converter</span></p><hr><p id=\"pressure\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Pressure Converter</span></p><hr><p id=\"density\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Density Converter</span></p><hr><p id=\"any\"><img id=\"images\" src=\"images/[email protected]\"><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 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 2

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.