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

【问题标题】：How to display contact picture using Ionic Contact如何使用 Ionic Contact 显示联系人图片
【发布时间】：2017-06-15 11:52:19
【问题描述】：

我正在开发一个位于Ionic 3 和Angular 4 中的应用程序。我正在努力显示来自 Ionic 的 Contact Picker 的联系人图片。

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

我能够获取联系人的 URI，但无法将其显示在 img 标记上。

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

组件的代码sn-p如下：

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

我的模板如下所示：

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

【问题讨论】：

【解决方案1】：

您需要先信任 url，然后才能显示它们，因为 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);
});

【讨论】：