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

我似乎在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

不起作用。我试图

解码URI

它们，使用

之前或之后的部分

和nothing.

您需要使用插件和

cdvphotolibrary

管道，如下所示

这里有工作

html

cdv-photo-library.ts（
pipe
）

有人知道如何用Quasar/Vue和Cordova做到这一点吗？
<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>

  //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
        }
      });
    });
  }

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