Ng-src file:/// images not rendering

cordova
1

I am using $cordovaFile.writeFile() to store images in cordova.file.dataDirectory (or cordova.file.applicationStorageDirectory). The file gets written without issue. I would like to use the file as an ng-src for an <img>. On Android, this might look something like: file:///data/data/com.ionicframework.starter924206/files/img-49444.jpg

While the URL looks good to me, it simply doesn’t render. I have tried:

Adding this CSP tag to index.html
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: blob: filesystem:;media-src mediastream:">

Messing around with $compileProvider, like:
app.js

.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
 $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension):|data:image\//);
}

And config.xml Cordova whitelists. Nothing works.

Any suggestions out there?

2

I have a similar problem with a video file which I download to the Apps persistent memory (~Documents). The path is correct, I can insert it as static “all-in-one” path in the template and the video is displayed. But when I use the path as a variable (this.storageDirectory + video) the video is not displayed.

The corresponding lines in page.ts:
[…]
storageDirectory: string = ‘’;
[…]
this.storageDirectory = cordova.file.documentsDirectory;
constructor(
[…]
public file: File,
public transfer: Transfer
) {
[…]
video = this.selectedItem.src;
this.filePath = this.storageDirectory + video;
[…]
}

And in template:

Nevertheless, the following displays the video, but for different reasons I want the path + filename set as one variable in .ts file.
<-source src="{{storageDirectory}}{{selectedItem.src}}" type=‘video/mp4’ />

(<-source … is just written here because the editor hides the <source…)

Anyone?