如何显示 Cordova PhotoLibrary 返回的图像？

Question

我似乎无法在 Android 上的图片库中显示图片。 PhotoLibrary 插件返回文件列表，但是当我将图像 URL 提供给 img 标签时，它们不会加载。

            window['cordova']['plugins']['photoLibrary'].getLibrary(
                result => console.log(libraryItem),
                err => console.log(err);
                },
                {
                    thumbnailWidth: 512,
                    thumbnailHeight: 384,
                    quality: 0.8,
                    includeAlbumData: true
                });

这将检索图像的 URL，但它们不能用于实际显示它们。我得到类似的东西：

creationDate: Fri Nov 03 2017 20:06:01 GMT-0400 (EDT)
fileName: "2017-10-4-1.jpg"
height: 960
id: "1907;/storage/emulated/0/Pictures/Timelapser/2017-10-4-1.jpg"
latitude: 0
longitude: 0
photoURL: "cdvphotolibrary://photo?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg"
thumbnailURL: "cdvphotolibrary://thumbnail?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg&width=512&height=384&quality=0.8"
width: 1280

将photoURL 或thumbnailURL 馈送到img src 不起作用。我尝试decodeURI他们，使用;之前或之后的部分，什么都没有。

Answer 1

你需要使用Native Photo Library插件和cdvphotolibrarypipe如下图。

这里正在工作Git project

html

<ion-grid no-padding margin-top>
    <ion-row class="row">
      <ion-col col-6 *ngFor="let data of library">
        <img [src]="data?.thumbnailURL | cdvPhotoLibrary">
      </ion-col>
    </ion-row>
  </ion-grid>

ts

  //fetch Photos
  fetchPhotos() {
    this.platform.ready().then(() => {
      this.library = [];

      this.photoLibrary.getLibrary({ thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT }).subscribe({
        next: (chunk) => {
          this.library = this.library.concat(chunk);
          this.cd.detectChanges();
        },
        error: (err: string) => {
          if (err.startsWith('Permission')) {
            this.platform.ready().then(() => {
              this.photoLibrary.requestAuthorization({ read: true })
                .then(() => {
                }).catch((err) => {
                  let message = 'requestAuthorization error: ${err}';
                  this.showToast.showErrorToast(message);
                });
            });
          } else { // Real error
            let message: 'getLibrary error: ${err}';
            this.showToast.showErrorToast(message);
          }
        },
        complete: () => {
          // Library completely loaded
        }
      });
    });
  }

cdv-photo-library.ts (pipe)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@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;
    }
  }
}