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插件和const foo = flat({ name: { p1: 'name', p2: 'name' }, fn: { p1: () => 0, p2: () => 1 }, }, 'p2'); // example code lacked 'p1' or 'p2' argument foo.name.charAt(0); // works foo.fn().toFixed(0); // works cdvphotolibrary，如下所示。

这是有效的Git project

HTML 的

pipe

TS

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

cdv-photo-library.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 } }); }); }）

pipe

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

1 个答案: