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.