CODEWITHSUNDEEP
angularcordovaionic2contactsionic3
Murhaf Sousli
Murhaf Sousli

Reputation: 13296

How to get contacts images Ionic 3

I am using Angular 4/Ionic 3 with Cordova-plugin-contacts and @ionic-native/contacts (testing on android emulator)

I was able to get a contact's list and display their displayName and phoneNumbers. but I couldn't display their photos because of the img src path error:

Not allowed to load local resource: content://com.android.contacts/contacts/1/photo

A contact photos object look like this 

photoObject: {
    id: "8", 
    pref: false, 
    type: "url", 
    value: "content://com.android.contacts/contacts/1/photo"
}

As you see value property doesn't have a valid img path which should end with the image extension such as .jpg or .png

Code:

constructor(public contacts: Contacts) {

   contacts.find(['displayName', 'phoneNumbers'], {multiple: true})
      .then((contacts) => {
          this.list = contacts;
      });
}

Template:

<ion-list>

  <button ion-item *ngFor="let contact of list">

    <ion-avatar item-start>
      <img *ngIf="contact?.photos" [src]="contact.photos[0].value"/>
    </ion-avatar>

    <div>
      <p> {{ contact.displayName || contact.phoneNumbers[0].value }} </p>
    </div>

  </button>

</ion-list>

enter image description here

How can I get contact's image path?

Upvotes: 1

Views: 2138

Answers (3)

Ivan Borysenko
Ivan Borysenko

Reputation: 245

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

Define Component Class method

sanitizeImage(value){
 return this.sanitizer.bypassSecurityTrustUrl(value)
}

Change Template

<ion-avatar item-start>
  <img *ngIf="contact?.photos" [src]="sanitizeImage(contact.photos[0].value)"/>
</ion-avatar>

Upvotes: 2

Aqeel
Aqeel

Reputation: 11

private win: any = window;

if(item.photos != null)
{
    image= this.win.Ionic.WebView.convertFileSrc(item.photos[0].value);
}
else
{
    image = "assets/imgs/no_avata.png";
}

Upvotes: 0

Hammad Ahmad
Hammad Ahmad

Reputation: 204

I just solved it with an another way. But please note i used this code in ionic 4 . I used ( WebView ) plugin for it. Which can be found here ( https://ionicframework.com/docs/native/ionic-webview 1 ). And my code was look like this:

    contactList = [];
    constructor(private contacts: Contacts, private sanitizer: DomSanitizer, private router: Router, private callNumber: CallNumber, private contact: Contact, private webView: WebView) {
    // TODO
  }

     getContacts(): void {
        this.contacts.find(
            ['displayName', 'phoneNumbers', 'photos'],
            {multiple: true, hasPhoneNumber: true}
        ).then((contacts) => {
          for (let i = 0 ; i < contacts.length; i++) {
            if(contacts[i].displayName !== null) {
              const contact = {};
              contact['name']   = contacts[i].displayName;
              contact['number'] = contacts[i].phoneNumbers[0].value;
              if (contacts[i].photos != null && contacts[i].photos.length > 0) {
                console.log(contacts[i].photos[0].value);
                contact['image'] = this.webView.convertFileSrc(contacts[i].photos[0].value);
                console.log(contact['image']);
              } else {
                contact['image'] = 'assets/dummy-profile-pic.png';
              }
              this.contactList.push(contact);
            }
          }
        });
      }

And now in the html file, you can use this code to display output:

    <div class="ion-padding">
          <ion-item *ngFor="let contactInfo of contactList">
            <ion-thumbnail slot="start">
              <ion-img [src]="contactInfo.image"></ion-img>
            </ion-thumbnail>
            <ion-label>
              <h2>{{ contactInfo.name }}</h2>
              <p>{{ contactInfo.number }}</p>
            </ion-label>
          </ion-item>
      </div>

Upvotes: 0

Related Questions