ionic 3 照片库图像未显示在 img 标签上答案

【问题标题】：ionic 3 photo library image not displayed on img tagionic 3 照片库图像未显示在 img 标签上
【发布时间】：2018-04-12 13:38:42
【问题描述】：

我按照 ionic doc here 和 Github doc here 的说明进行操作。到目前为止，我可以检索所有图书馆项目信息。但我从来没有成功在 img 标签上显示照片。

这是我的 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;
}

}

这里是 home.html：

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

我总是得到带有src=null 的空img 框。如果我不使用 DomSantinizer，它将显示所有照片的警告：

警告：清理不安全的 URL 值 cdvphotolibrary://thumbnail?photoId=xxx&width=xx&height=xx&quality=0.5

（见http://g.co/ng/security#xss）

我的离子信息是： cli 包：(/usr/local/lib/node_modules)

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

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

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

系统：

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

有人帮忙吗？？谢谢！！

【问题讨论】：

您是否在 index.html 中添加了<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: cdvphotolibrary:"> 标签？
@DiegoCardozo 是的，我试过了。将此行添加到 index.html 后，应用程序运行时只有白屏，内部没有其他内容。我不确定是什么问题...
在你的 config.xml 中有这个标签： ?
@DiegoCardozo 将上述代码添加到 config.xml 后，没有任何改变...
然后我再次添加了一个console.log(this.sanitizer.bypassSecurityTrustUrl(imgUrl))，仍然返回{"changeingThisBreaksApplicationSecurity":"cdvphotolibrary://thumbnail?photoId=xxx&width=xx&height=xx&quality= 0.5"}。有什么想法吗？

标签： angular ionic-framework photolibrary

【解决方案1】：

我想我在这里找到了解决方案 - 将 WKWebView 更改为 UIWebView。然后图片就出现了。

我在post 中找到了原因。另外ionic官方doc也证明目前WKWebView不支持本地文件。

我希望我的帖子能对有类似情况的人有所帮助，并希望 ionic 团队能够尽快在自定义模式文件路径方面改进 WKWebView。编码愉快~！

【讨论】：

【解决方案2】：

这就像一个魅力：-

如果您使用的是 wkwebview（现在是新应用的默认设置）然后按照以下步骤，

import { normalizeURL} from ‘ionic-angular’;

store your image path in some new variable.
var imagePath = this.file.dataDirectory + “test.png”;
this.tempImagePath = normalizeURL(imagePath);

then in your html file,
use tempImagePath as image src.

来源： https://forum.ionicframework.com/t/downloaded-image-is-not-displayed-ionic-3-8/110912/2

要查看 WKWebview 是否安装正确，请尝试将其添加到您的主应用程序组件中：

if (window.indexedDB) {
  console.log('I have WKWebview installed!');
} else {
  console.log('I have UIWebView installed!');
}

【讨论】：