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: