Fail to display thumbnailURL on <img>

[victoria168]

Hi, I followed the instruction on ionic docs and the one here. Up to now I can retrieve all library item info. But I never succeed in displaying the photos on img tab. Here are my home.ts: `import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';

import { PhotoLibrary } from '@ionic-native/photo-library'; import { Platform } from 'ionic-angular'; import { ChangeDetectorRef } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage {

library:any;

constructor(public navCtrl: NavController, private photoLibrary: PhotoLibrary, private platform: Platform,
    private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) {
    this.library = [];
    this.fetchPhotos();
}

fetchPhotos() {

    this.platform.ready().then(() => {

        this.library = [];
        this.photoLibrary.requestAuthorization().then(() => {
            this.photoLibrary.getLibrary({ 
                thumbnailWidth: 512, 
                thumbnailHeight: 384, 
                itemsInChunk: 100, 
                chunkTimeSec: 0.5, 
                useOriginalFileNames: false
            }).subscribe({
                next: (chunk) => {
                    this.library = this.library.concat(chunk);
                    //this.library = this.library.slice(0, 9); // To take top 10 images
                    this.cd.detectChanges();
                },
                error: (err: string) => {
                    if (err.startsWith('Permission')) {
                        console.log('permissions weren\'t granted')
                    } else { // Real error
                        console.log('getLibrary error: ');
                        console.log(err);
                    }
                },
                complete: () => {
                    // Library completely loaded
                    console.log('done getting photos');
                }
            });
        });
    });

}

imgUrl(imgUrl) {
    let url: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
    return url;
}

}`

Here is home.html:

<ion-content padding>
  <img *ngFor="let libraryItem of library" [src]="imgUrl(libraryItem.thumbnailURL)" />
</ion-content>

I always got empty img box with src=null. If I don't use DomSantinizer, it will show the warning for all photos: WARNING: sanitizing unsafe URL value cdvphotolibrary://thumbnail?photoId=xxx&width=xx&height=xx&quality=0.5 (see http://g.co/ng/security#xss)

My ionic info is: cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.8.0

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.4.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 

Anybody please help?? Thanks!!

[victoria168]

I found this post here: https://github.com/terikon/cordova-plugin-photo-library/issues/41 And after I tried to force use UIWebView, the images finally show up... thank god. But the performance is not really good when performing scrolling.

[totoro0103]

@victoria168 this issue is same with me. https://forum.ionicframework.com/t/ios-device-can-not-display-image-when-using-photo-library/114197 Is that install UIWebview and it's work?