Images that are not displayed in PhoneGap Build

Question

Recently, I decided to start using PhoneGap Build to build web-based applications. Please note that I use PhoneGap Build not PhoneGap and therefore do not support my own APIs.

I use img HTML tags to display images, of course, and I have problems. Images display well in the browser, but when I take it to my phone, they just disappear. I tried everything: check case and spelling. I even tried uploading images to my site server and nothing.

Any help on this would be greatly appreciated.

UPDATE

I use this HTML code, this is a JavaScript string like the way I enter it at 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 is stored with missing characters, so it is difficult to read. But you get the gist. The simplest tags do not work. I have CSS that does some background images using url () which also don't display.

Answer 1

I managed to fix this by simply throwing the images in the root folder and contacting it. It may not be the best solution, but it works! Hope this helps any viewer. PhoneGap build applications require the images to be in the root folder.

Answer 2

I had a similar problem. My solution was to change the image paths by removing the leading "/":/img/my_icon.png → img / my_icon.png, then my icons appeared in the application. It seems that your paths are correct.

Answer 3

I had problems with case sensitivity of the file name, after changing all the image file names to lower case and accessing them with the same case everything began to work fine.

Answer 4

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

I use Nomad , so I don’t know if this is a Nomad problem when packing the application or problems with PhoneGap.

Answer 5

I had a problem with this when I used media queries in CSS. I forgot to keep in mind that CSS image paths refer to a stylesheet, not a document. So in my case, my path became ../images/...

Answer 6

It may be useful for developers using gulp to create their own applications: if the images do not appear, check where the images are placed in www after gulp build .

In my case, PhoneGap was looking for images in the /www/css folder. Modifying clean and images tasks to reflect what solved my problem.

I tried to set the background image using CSS; it works now using:

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