Pictures inside cordova.file.dataDirectory don´t show

Hey everyone,

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?

  1. 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).
  2. 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.
  3. 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.
  4. I searched the web and experimented with whitelist entries. No success.
  5. I experimented with different CSP Entries inside index.html, e.g. <meta http-equiv=“Content-Security-Policy” content="default-src ‘self’ data: gap: cdvfile: ‘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.
  6. 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:
Cordova 7.0.1
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"
iOS-plattform 4.4.0

I put the code I found relevant into this plunker:

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.

Kind regards,

Hey Frank,

got a similar architecture on my app (downloading images with cordova file and want to show them to the user) and I’m facing the same issue. I have tried almost every same step you provided with no luck so far. Did you fixed this problem by now ?

I’m pretty sure it’s an issue with a new iOS Version or one of the Plugins in a newer Version because my App worked the last 2 years the way it is right now and still is inside the App-Store like this.


Just for everybody who came here having the same issue as me and maybe Frank

Since WkWebView now is the default to go

    if (this.isIOS()) {
      fileUri = fileUri.replace(/^file:\/\//, '');

this helped me … even if it seems like a stupid workaround

1 Like

Hey Nixosch,
I didn´t fix it when you were posting as the Customer was unsure about iOS 9 Compatibility and I couldn´t get WkWebView to work with it, even your solution.

After your post I tried your approach and it worked well, thank you for that!
I just had to change a minor detail as I need to do the replace inside a controller. My solution there is:

if(ionic.Platform.isIOS()) {
 fileUri = fileUri.replace(/^file:\/\//, '');

Kind Regards,

I which file and where we have to add this?