How to display contacts photos


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


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

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

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



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

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

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

Thank you.

1 Like

You didn’t post the error your are getting.

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

There it says “Not allowed to load local resource: content://” - which is it? 404 or this error?

Here is an example of an app that displays contact photos:

Yes “content://” does not end with .jpg or .png. I need the images links

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.

Yes I am getting this error Not allowed to load local resource: content://

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


Last time I am answering you now:

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

@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:


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.