IOS File Access - Image Loading Issue


#1

Context:
I’ve been building a mobile library resource application for the Food Service industry. A user will be able to log into the application view all the content he/she has access to and download the content(elearning courses, reference tools, etc) to the device so they can view them in offline mode or areas with poor internet connection (like the inside of a commercial freezer).

I’ve recently come across an issue with specific content where the content’s splash page fails to load the embedded images, only on an IOS device. If I remove the splash page, the base page fails to load its images(Tested to see if it was specific to the splash page). Each piece of content is downloaded as a zip file with a simple (HTML) folder structure. This piece of content is then loaded and unzipped into a page within my Ionic application from the device file system(IOS - /Library/NoCloud/[CONTENT_ID_NUMBER]/[CONTENT_FILES]).

After downloading content and installing it onto the device, I launch it. On first launch everything works perfectly fine, the images appear and animate (Removed animation and it still failed) in. On second and consecutive launches it fails to load with the following errors per image (see below). I can get it to fail consistently on iPhone 7, semi frequently on iPhone 6 and iPhone 5, and not at all on the old original iPad.

I have no issues with Android Devices.

Error:
Failed to load resource: The requested URL was not found on this server.
File:
file:///var/mobile/Containers/Data/Application/9592C4EF-AD3D-4EFB-B6AF-9BF5A8EC48FC/Library/NoCloud/46030/pocketTech/dr/si144573.png

Any help on this would be appreciated.