I want to display the image of the contacts,but I am getting thiis output…
Html code–
<ion-item-sliding *ngFor="let contact of group.contacts" class="contactlist">
<ion-item>
<ion-avatar item-start>
<img src="{{contact.image}}">
</ion-avatar>
{{contact.name}}
<p>{{contact.number}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary" *ngIf="contact.phoneNumbers"
(click)="callContact(contact.phoneNumbers[0].value)">
<ion-icon name="call"> Call</ion-icon>
</button>
</ion-item-options>
<ion-item-options side="left">
<button ion-button color="danger"
(click)="sendmessage()">
SMS
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
typescript code–
co.find(["displayName", "phoneNumbers","photos"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {
for (var i=0 ; i < contacts.length; i++){
if(contacts[i].displayName !== null){
var obj = {};
obj["name"] = contacts[i].displayName;
obj["number"] = contacts[i].phoneNumbers[0].value;
obj["image"]= contacts[i].photos;
this.contacts.push(obj)
console.log("message");
}
}
this.groupContacts(this.contacts);
})
}
Please let me know where I am wrong…
Thanks
Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.
vithika:
{{contact.image}}
What is in here? console.log it and show us.
yes i did this,getting the following…
So what does it tell you?
it cannot find the image…do i need to add something else in my code…
i also referred this link—
but it does not work in my case…
Look at what it is trying to load.
how to do that,I think it is some size issue,is it so…
it is trying to fetch the image as that box is visible only in contacts which have photo,but its not able to display that…
Is my html code <img-src="{{contact.image}}" >correct??
Hey,
Please use DomSanitizer , there is xss issues ur browser blocking the img src
Yes, but look at what image it’s trying to load:
Failed to load [object%02Object]
Does that look like a URL to you? Did you console.log the element that you use as URI to see what is inside?
I tried adding the same,but still the same output…
export class AboutPage {
contacts = []
groupedContacts = []
searchQuery: string = '';
items: string[];
constructor(public navCtrl: NavController,public co:Contacts,public viewCtrl:ViewController,public popoverCtrl:PopoverController,
public callNumber:CallNumber,public sms:SMS,private domSanitizer:DomSanitizer) {
this.initializeItems();
co.find(["displayName", "phoneNumbers","photos"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {
for (var i=0 ; i < contacts.length; i++){
if(contacts[i].displayName !== null){
var obj = {};
obj["name"] = contacts[i].displayName;
obj["number"] = contacts[i].phoneNumbers[0].value;
obj["image"]= this.domSanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
this.contacts.push(obj)
console.log("message");
}
}
this.groupContacts(this.contacts);
})
}
how to do that…like if i am adding console.log(“message”) inside the for loop…I am getting that printed
for (var i=0 ; i < contacts.length; i++){
if(contacts[i].displayName !== null){
var obj = {};
obj["name"] = contacts[i].displayName;
obj["number"] = contacts[i].phoneNumbers[0].value;
obj["image"]= this.domSanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
this.contacts.push(obj)
console.log("message");
}
}
this.groupContacts(this.contacts);
})
}
…I dont understand to what does it point to…
Get rid of the domSanitizer stuff, that is not your problem.
You try to set image to contacts[i].photos[0].value.console.log(contacts[i].photos[0].value) to see what you are sending to the browser to display.console.log(obj) before you push to to the contacts array.
Can u console the image src. that what u are getting from?
I am getting the following output …
code-
for (var i=0 ; i < contacts.length; i++){
if(contacts[i].displayName !== null){
var obj = {};
obj["name"] = contacts[i].displayName;
obj["number"] = contacts[i].phoneNumbers[0].value;
obj["image"]= contacts[i].photos;
console.log(contacts[i].photos);
this.contacts.push(obj)
console.log(contacts[i].photos);
console.log(obj);
}
console.log(obj);
}
this.groupContacts(this.contacts);
})
}
how can i resolve this issue
You are changing your code… before you used contacts[i].photos[0].value, now only contacts[i].photos.
What is the expected format of contacts[i]? I have no idea where that comes from, so of course I don’t know what it should look like. Do a console.log(contacts) to see all your data.
Do any of your contacts have photos at all?
if I am doing contacts[i].photos[0].values,
If I am doing contacts[i].photos,I am able to display the other details name and phone number but not the photos
Yes the contacts which have photos,are getting output as some box while which have no photos
Like this–
