Image not displaying while displaying contacts


#1

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


Getting contacts displayName and phoneNumbers
#2

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.


#3

What is in here? console.log it and show us.


#4

yes i did this,getting the following…


#5

So what does it tell you?


#6

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…


#7

Look at what it is trying to load.


#8

how to do that,I think it is some size issue,is it so…


#9

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??


#10

Hey,

Please use DomSanitizer , there is xss issues ur browser blocking the img src


#11

ok …let me check it


#12

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?


#13

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);
  })
}

#14

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…


#15

how to test for the url…


#16

Get rid of the domSanitizer stuff, that is not your problem.

You try to set image to contacts[i].photos[0].value.
Try console.log(contacts[i].photos[0].value) to see what you are sending to the browser to display.
Or console.log(obj) before you push to to the contacts array.


#17

Can u console the image src. that what u are getting from?


#18

I am getting the following output …
it gives a null value on the contact.photos…

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


#19

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?


#20

if I am doing contacts[i].photos[0].values,
it gives me error ,and nothing is being displayed on that page neither name or phone number
Error-
that 0 is not defined…something like that…exactly I don’t remember…

If I am doing contacts[i].photos,I am able to display the other details name and phone number but not the photos
contacts[i] is the array of all the contacts…

Yes the contacts which have photos,are getting output as some box while which have no photos
are getting nothing,only the empty circle…

Like this–