[iOS device ]Can not display image when using Photo Library

Ionic Native
1

Hi everybody. I have a issues that i can not understand.
First , i use lib https://github.com/terikon/cordova-plugin-photo-library
run command:
ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos" npm install --save @ionic-native/photo-library
next, I create cdv-photo-library.ts:

@Pipe({
  name: 'cdvPhotoLibrary',
})
export class CdvPhotoLibraryPipe implements PipeTransform {
  
  constructor(private sanitizer: DomSanitizer) { }
  
    transform(url: string) {
      if (url != null) {
        return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
      }
    }
}

html:

<ion-content>
    <button ion-button (click)='showPhoto()'>Show photo</button>
  <ion-grid class="no-padding">
      <ion-row>
          <ion-col class="no-padding">
              <ion-row>
                  <ion-col class="no-padding">
                      <ion-row>
                          <ion-col (click)="clickPhoto(libraryItem)" *ngFor="let libraryItem of library" class="padding-left-right" col-4>
                              <img [src]="libraryItem.thumbnailURL | cdvphotolibrary">
                              <ion-label *ngIf="libraryItem.id ===iditem" class="label-hover">
                                  <ion-icon class="size-icon" ios="ios-checkmark-circle" md="md-checkmark-circle"></ion-icon>
                              </ion-label>
                          </ion-col>
                      </ion-row>
                  </ion-col>
              </ion-row>
          </ion-col>
      </ion-row>
  </ion-grid>
</ion-content>

ts:

fetchPhotos() {
    this.platform.ready().then(() => {
      this.library = [];
      this.photoLibrary.requestAuthorization().then(() => {
        this.photoLibrary.getLibrary().subscribe({
          next: (chunk) => {
            this.library = this.library.concat(chunk);
            //this.library = this.library.slice(0, 9); // To take top 10 images
            this.cd.detectChanges();
            console.log(this.library[0].thumbnailURL)            
          },
          error: err => { console.log(err); },
          complete: () => {
            // Library completely loaded
          }
        });
      })
    }).catch(err => console.log('permissions weren\'t granted'));
  }

In Xcode show to log:
2017-12-03 23:04:45.059589+0700 MyApp[22257:508516] cdvphotolibrary://thumbnail?photoId=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED%2FL0%2F001&width=512&height=384&quality=0.5.
but image not display to simulator :

25 PM
Screen Shot 2017-12-03 at 11.09.25 PM.jpg648×1280 54.2 KB

Finally, i download project demo in here https://github.com/terikon/photo-library-demo-ionic2 and change my code into and it’s work .
08 PM
Screen Shot 2017-12-03 at 11.10.08 PM.jpg640×1304 218 KB

I try to install more plug-in ( WKWebview) but it’s not work
It’s magical for me .Please help me !

3

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

Also post your ionic info output please.

4

If you are using WKWebview, custom schemes like cdvphotolibrary:// are not [yet] supported. I had a similar problem and had to revert back to UIWebView — that’s the only way I could get this plugin to work.

See https://github.com/terikon/cordova-plugin-photo-library/issues/41 for more info.

1 Like
5

thank a lot @jaybloke . I had solve my issue:

I remove (not reinstall) WKWebview:
ionic cordova plugin rm cordova-plugin-ionic-webview --save
In config.xml. Add 3 line :

   <preference name="webviewbounce" value="false" />
   <preference name="UIWebViewBounce" value="false" />
   <preference name="DisallowOverscroll" value="true" />

And it’s work !

1 Like
6

I have used google maps in my app. When I remote WKWebview, google map is not displayed. So, what should I do?

1 Like
7

Is that Google maps javascript or Google maps native? In either case, hard to diagnose problem without any code…

8

It’s google maps native

9

but i want use both plugin web view and photo-library.
whats solution for that?

10