使用离子接触未显示接触图像

Question

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

我的代码 .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 数据中将您的图像分配给属性“logo”。 例如：

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

希望这有帮助。

Answer 2

我通过以下方式解决了这个问题：

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