I successfully developed an app with IONIC 1 last year. It was working until the new iOS Version 11. I solved all problems except one: On one page I display a fullscreen background picture which gets dynamically assigned. This picture is displayed if I use a relative path to the Portraits that are inside the Bundle. An absolute path isn´t working.
What did I try?
- I ran the App in the iOS Emulator and logged the path with console.log. Then I checked in the Mac OS Filesystem and the files are there (after the download).
- I experimented with the Paths. Wrote them hardcoded with file://, file:///, resolved them manually to cdvfile:// and cdvfile://. Added a call to $window.resolveLocalFileSystemURL() to get either an absolute native Path or an absolute cdvfile path. All absolute Paths fail to display the image. When I made a typo in the path I see the small default icon for file not found, so I know when the Paths are correct.
- Tried to use an absolute path to reference the bundle images. With a relative path I see the portrait, with the absolute path it´s the same as with Number 2.
- I searched the web and experimented with whitelist entries. No success.
- I experimented with different CSP Entries inside index.html, e.g. <meta http-equiv=“Content-Security-Policy” content="default-src ‘self’ data: gap: cdvfile: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *”> or <meta http-equiv=“Content-Security-Policy” content="default-src * gap://ready file: cdvfile:; style-src ‘self’ ‘unsafe-inline’ *; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ *”>. No success.
- I experimented with the Template, used src instead of ng-src, used double quotes, removed them. No Success.
I am sure I missed something, probably something tiny that blocks displaying the images. The console messages show no nothing indicating that loading the images failed. I have searched for days on the web, trying the suggestions of various threads, examples and tutorials.
Please help me understand what I´m doing wrong.
I use the following versions:
Ionic CLI 3.16.0
cc.fovea.cordova.purchase 7.0.2 "Purchase"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.1.0 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-inappbrowser 1.5.0 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-ios-keychain 3.0.1 "KeyChain Plugin for Cordova iOS"
cordova-plugin-media 3.0.1 "Media"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.0 "StatusBar"
cordova-plugin-whitelist 1.3.0 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
ionic-plugin-keyboard 2.2.1 "Keyboard"
I put the code I found relevant into this plunker: https://plnkr.co/edit/TbAVjs70Tf3bf5AjHY6x
If someone buys/unlocks the app, they download additional portraits in a resolution depending on their device. These get extracted into cordova.file.dataDirectory. In the Mac OS finder I see that the pictures are there.
The Portrait Controller gets all Portrait Definitions from a Service and writes the current one (depending on the portraitId Parameter from the $state) into $scope.portrait.
Please help me understand where my mistake is and how to fix it.