CODEWITHSUNDEEP
angularionic-frameworkionic3
Yuvraj Patil
Yuvraj Patil

Reputation: 8726

How to display contact picture using Ionic Contact

I am working on an app which is in Ionic 3 and Angular 4. I am struggling with displaying contact image from Contact Picker of Ionic.

I have used Ionic Contact to implement contact picker.

I am able to get the contact's URI but not able to display it on a img tag.

Does anyone knows how to display contact image in Ionic 3 ?

Code snippet for component is as below:

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

My template looks like below:

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

Upvotes: 2

Views: 1253

Answers (1)

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

You need to trust the url before you can display them because angular has built in xss protection. I think it'll solve your problem. Read about it here: https://angular.io/api/platform-browser/DomSanitizer

You need to do following things:

a. Import DomSanitizer

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


b. Add it's entry in constructor function 

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


c. Use domSanitizer API

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

Upvotes: 2

Related Questions