How to display contacts photos

Ionic Native
1

Hi,

I’m trying to embed contacts in my app, I am using cordova-plugin-contacts with @ionic-native/contacts

  <ion-list>

    <button ion-item *ngFor="let contact of list | filterBy: {displayName: term}">

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

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

    </button>

  </ion-list>


constructor(public contacts: Contacts,) {
    contacts.find(['displayName', 'phoneNumbers', 'photos'], {multiple: true}).then((res) => {
      console.log(res[0].photos[0]);
      this.list = res;
    }).catch(err => {
      console.log('Error');
    });

the code displays the contacts display names and phone number, but I get error on contact img, because contact.photos[0].value path look like this content://com.android.contacts/contacts/1/photo

Is there something I should use to get contact images displayed?

Thank you.

1 Like
2

You didn’t post the error your are getting.

3

The error is 404 because the path does not point to an image, more details in this SO question

4

There it says “Not allowed to load local resource: content://com.android.contacts/contacts/1/photo” - which is it? 404 or this error?

Here is an example of an app that displays contact photos: https://github.com/janpio/ionic-native-contacts

5

Yes “content://com.android.contacts/contacts/1/photo” does not end with .jpg or .png. I need the images links

6

That doesn’t matter. The example I posted works fine and was tested just a few days ago.
Your problem is the security, as indicated by the error message “Not allowed to load…” that you still ignore and haven’t posted here. Please post a screenshot of your error message.

7

Yes I am getting this error Not allowed to load local resource: content://com.android.contacts/contacts/1/photo

image
Screenshot from 2017-07-17 21-58-46.png865×603 72.6 KB

I don’t get an “Allow” dialog on android emulator, Do you know how can I fix it?

Thanks.

8

Last time I am answering you now:

Have a look at the code of the Github repo I posted.

9

@Murhaf don’t forget to use <img [src]="…"/>
and this.sanitizer.bypassSecurityTrustUrl()
and don’t test it using livereload
it’s working with this conditions . :slight_smile:

2 Likes
10

I try that code.But i am getting this error Not allowed to load local resource:…
How to try in Ionic4.Thanks for your help.