Unable to load local images using fileUri from Image Picker native plugin on iOS

In my project, users can choose images using Image Picker and then they are displayed on the screen. Previously, I used only the fileUri, as in the following code:

ts:

this.imagePicker.getPictures({ maximumImagesCount: 2 }).then(results => {
    if (results.length) {
        for (let i = 0; i < results.length; i++) {
            this.post.photos.push(results[i]);
        }
    }
}, error => {
    console.error(error);
});

html:

<ion-slides pager>
    <ion-slide *ngFor="let photo of post.photos">
        <img class="media" [src]="photo">
    </ion-slide>
</ion-slides>

And everything was working fine, the images were shown on both Android and iOS.

But after a few problems and several bugs in files (npm packages, duplicate configuration files…), I started another project from 0 (ionic start), and then I installed all the native plugins one by one (to ensure there were no errors between them) and copied the src folder with the files from the old project to the new project.

Everything went well, all the plugins work perfectly and the app itself as well. However, the local images (from Image Picker) were no longer loaded (and I loaded the same old project code, which worked perfectly).

For Android, I was able to solve this problem using:

html:

<ion-slides pager>
    <ion-slide *ngFor="let photo of post.photos">
        <img class="media" [src]="convertFileSrc(photo)">
    </ion-slide>
</ion-slides>

ts:

converFileSrc(fileUri) {
    return (<any>window).Ionic.WebView.convertFileSrc(fileUri);
}

But for iOS, it does not work.

I’ve tried with (As suggested in https://ionicframework.com/docs/wkwebview/):

ts:

this.post.photos.push(normalizeURL(results[i]));

But get the following message from XCode console:

WARN: normalizeURL is deprecated, use window.Ionic.WebView.convertFileSrc

I’ve tried to add the following:

ts:
this.post.photos.push("file:///" + results[i]);

html:

<ion-slides pager>
    <ion-slide *ngFor="let photo of post.photos">
        <img class="media" [src]="photo">
    </ion-slide>
</ion-slides>

But without success.

I also tried the following:

html:

<ion-slides pager>
    <ion-slide *ngFor="let photo of post.photos">
        <img class="media" [src]="convertFileSrc(photo)">
    </ion-slide>
</ion-slides>

ts:

converFileSrc(fileUri) {
    this.file.resolveLocalFilesystemUrl(fileUri).then(fileEntry => {
      // domSanitizer because I was getting a XSS error
      return this.domSanitizer.bypassSecurityTrustUrl(fileEntry.toInternalURL());
    });
}

But without success too.

So, how can I fix this? I just wanna to display images from Image Picker with fileUri on <img> tag. (I don’t want to use the base64 return from plugin, just want to keep using fileUri).

Any help will be greatly appreciated.

ionic info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.2.0
Cordova Platforms  : android 7.0.0 ios 4.5.5
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.9.4
npm   : 5.10.0
OS    : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Have you resolved this error? If Ok , please share me.