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

Question

我正在研究一个应用程序，该应用程序位于Ionic 3和Angular 4之间。 我与离子的联系人选择器中显示联系人图像挣扎。

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

我能够得到联系人的URI，但无法显示它在img标签。

有谁知道如何在离子显示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

你需要信任网址，才能显示出来，因为角已建成XSS保护。我认为它会解决你的问题。阅读在这里：https://angular.io/api/platform-browser/DomSanitizer

你需要做以下的事情：

一个。进口DomSanitizer

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

湾它添加的条目构造函数

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

℃。使用domSanitizer API

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