Question

我正在使用Ionic 4开发应用程序。我正在尝试显示联系人列表中的联系人图像。但是它现在起作用了。我还尝试过清理URL，但仍然无法正常工作。

我的代码.ts文件：

import { Component, OnInit } from '@angular/core';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts/ngx';
import { NavController} from '@ionic/angular'
import { Router } from '@angular/router';
import { DomSanitizer} from '@angular/platform-browser';


@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
    providers: [Contacts],
})
export class ContactPage implements OnInit {

contactList: any[] = [];  

constructor(public navCtrl: NavController,private router: Router, 
     private contacts: Contacts , private sanitizer: DomSanitizer,) { 

    this.fetchDeviceContact();

}

fetchDeviceContact(){


    this.contacts.find(["displayName", "phoneNumbers","photos"], {multiple: true}).then((contacts) => {

      for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].displayName !== null) {


           var name  = contacts[i].displayName;
           var number =  contacts[i].phoneNumbers[0].value;
           if(contacts[i].photos !== null){
           var photo = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
           }else{
           var photo = '';
           }

            var contactData={
                                "displayName":name,
                                "phoneNumbers":number,
                                "image":photo,                            
                            }

          this.contactList.push(contactData);

           this.contactList.sort(function(a, b) {
             return compareStrings(a.displayName, b.displayName);
          });  

        }
      }

    });

}


}

和我的html代码：

<ion-content padding >
      <ion-searchbar  ></ion-searchbar>
      <ion-list  *ngFor="let contact of contactList; let i = index;" >   
      <ion-item >
      <ion-grid>
      <ion-row>
        <ion-col>
          <div>
            <ion-img [src]="contact.image"></ion-img>
            <ion-icon ios="ios-person" md="md-person"></ion-icon> <b>  {{contact.displayName}}</b>
          </div>
        </ion-col>
        </ion-row>
      <ion-row>
        <ion-col  size="10">
          <div>
            <ion-icon item-start  ios="ios-call" md="md-call" ></ion-icon> {{ contact.phoneNumbers}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </ion-item>
    </ion-list>

我的数组：

请帮助。在我的应用中显示联系人图像的正确方法是什么？

Answer 1

使用此<img [src]="contact.image"> 而不是<ion-img [src]="contact.image"></ion-img>。如果这不起作用，请确保在JSON数据中将图像分配给属性“徽标”。例如：

 [{
 displayName: "";
 phoneNumbers: "";
 logo: "";
 }]

希望这会有所帮助。

Answer 2

我通过使用以下方法解决了这个问题：

this.webView.convertFileSrc(contacts[i].photos[0].value);

使用Ionic Contact无法显示联系人图像

2 个答案: