如何使用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); 
});