Cannot display contact's image using the contacts plugin


#1

I’m using the contacts plugin for displaying the contacts on the device as a list. All the fields are returned and displayed properly except the contacts’ image.

For the photo of the contact: The contacts plugin returns a url which is the location of the image on the device. When I try to load the image from this url using <img [src]="contact.src"> , nothing happens no image is displayed
The code is as follows:

constructor(public navCtrl: NavController, 
    			public navParams: NavParams,
    			public contacts: Contacts) {
    
    	this.contacts.find(["displayName", "addresses", "emails", "phoneNumbers", "photos"]).then(contacts =>{
    
    		for(let i =0 ; i < contacts.length; i++){
    			let list = {};		
    			list['name'] = contacts[i].name.formatted;
    			if(contacts[i].emails){
    				list['email'] = contacts[i].emails[0].value || "";
    			}
    			if(contacts[i].phoneNumbers){
    				list['phone'] = contacts[i].phoneNumbers[0].value || "";
    			}
    			if(contacts[i].photos){
    				list['src'] = contacts[i].photos[0].value || "";
    				// console.log(contacts[i].photos[0].value);
    			}
    			if(contacts[i].addresses){
    				list['address'] = contacts[i].addresses[0].streetAddress+", "+contacts[i].addresses[0].region+" ,"+contacts[i].addresses[0].postalCode;
    			}
    			// console.log(JSON.stringify(list)+"\n");
    			this.contactList.push(list);
    		}
    
    	});
    }
    
    getImgSrc(i){
    	// console.log("index:"+i);
    	return i+".jpg";
    }

The html code is as follows:

<ion-item>
	  <ion-avatar item-start>
	    <img [src]="getImgSrc(contact.src)">
	  </ion-avatar>
	  <h2>{{ contact.name }}</h2>
	  <p>{{ contact.phone }}</p>
	</ion-item>

Screenshot of the error:


#2

You are lucky, I just implemented (and explained) this for another thread:


#3

According to the plugin docs, you need to check the type attribute on photos. It’s not guaranteed to be url. Might be base64 instead.


#4

I didn’t say I implemented a good solution, just a (accidentally) working one :wink:

You are of course right:

However, for the Contact photos field, the type field indicates the format of the returned image: url when the value attribute contains a URL to the photo image, or base64 when the value contains a base64-encoded image string.


#5

Check out the solution in this video https://youtu.be/IeRiwFtDUtU


#6

Penicillin was an accident too. That worked out very well…