Images not appearing on iPhone

I’ve included a number (6) of images in my app and they appear when I run the app in Chrome, but not on my iPhone. One of the images has a corresponding .onclick() function which still works if I touch the screen where the image should be, but there is no image displayed.

Can you post some code (html and javascript)?

In the properties window under “extraFiles” you need to enter the name of the folder where the images are located i.e images, the images folder needs to be located in the route folder of your .project file next to these folders cache, certificates, forms, includes ect…

I’ve always had those files included in the extraFiles - why would it work in Chrome and not iOS?

It may be an issue with your image paths. Or if you’ve used abs path? Or a half dozen other issues.

Best way to get is to give.

Post your code or file so it can be inspected by those wanting to help👍

Are you loading the images via code or placing them a form in the design screen? If using code to display the images, I had a similar problem in the past where the images did not show on the iPhone. My workaround was to actually place all the images on the form in the design screen, then hide them till I needed to display them. This way, it forced the app to contain the images and eliminated any path issues using code.

Clunky work-around, yes, but it solved the problem.

If I pre-load the image on the screen in the design screen it works. Thank you.

Images have been an issue for me as well and not just iOS but Android. I found that pre-loading them solved most of the problems. However, I use images in common grid cells and cannot do this. My solution was to take these small jpgs/pngs and convert them to Base64 and then pack them into a single file. This file is read on program load and saved to localStorage where I can unpack them and use wherever needed in the app. Not the best solution but it works.

I once used a control of some kind that let me create a single image in a fixed bit array of images in VB6. One large jpg with hundreds of smaller images of the same size. The program could select by row and column any of these images which I could then use accordingly. Wouldn’t it be nice…


If the image is where the app expects it to be at runtime, it should display.

If you’re running under PhoneGap (are you?) you may need to set your ContentSecurityPolicy. Try hooking up the app the debugger to see if there are any messages.

No, not running under Phonegap and it only happened when offline. I’ll keep an eye opened for this issue when testing a new app, haven’t done offline testing yet. Let you know.