如何使用Ionic Contact显示联系人图片

Question

我正在使用位于Ionic 3和Angular 4的应用。 我正在努力展示来自Ionic的Contact Picker的联系人形象。

我已使用Ionic Contact来实施联系人选择器。

我可以获取联系人的URI，但无法在img标记上显示。

有谁知道如何在Ionic 3中显示联系人形象？

组件的代码段如下：

this.contacts.pickContact().then((contact) => {
      this.photo = contact.photos[0].value;     //  It contains valid photo URI
});

我的模板如下所示：

 <ion-avatar><img [src]="photo"></ion-avatar>

Answer 1

您需要先信任该网址才能显示它们，因为angular已内置了xss保护。我认为它会解决你的问题。在此处阅读：https://angular.io/api/platform-browser/DomSanitizer

您需要做以下事情：

一个。导入DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

湾在构造函数中添加它的条目

    constructor(public navCtrl: NavController,
        ...
        private sanitizer: DomSanitizer,
        ... 
    ){ }

C。使用domSanitizer API

this.contacts.pickContact().then((contact) => {
  this.photo = this.sanitizer.bypassSecurityTrustUrl(contact.photos[0].value);
});