如何获取联系人图像 Ionic 3答案

【问题标题】：How to get contacts images Ionic 3如何获取联系人图像 Ionic 3
【发布时间】：2017-07-16 12:49:23
【问题描述】：

我正在使用 Angular 4/Ionic 3 和 Cordova-plugin-contacts 和 @ionic-native/contacts（在 android 模拟器上测试）

我能够获取联系人列表并显示他们的 displayName 和 phoneNumbers。但由于 img src 路径错误，我无法显示他们的照片：

Not allowed to load local resource: content://com.android.contacts/contacts/1/photo

联系人照片对象如下所示

photoObject: {
    id: "8", 
    pref: false, 
    type: "url", 
    value: "content://com.android.contacts/contacts/1/photo"
}

如您所见，value 属性没有有效的 img 路径，该路径应以图像扩展名结尾，例如 .jpg 或 .png

代码：

constructor(public contacts: Contacts) {

   contacts.find(['displayName', 'phoneNumbers'], {multiple: true})
      .then((contacts) => {
          this.list = contacts;
      });
}

模板：

<ion-list>

  <button ion-item *ngFor="let contact of list">

    <ion-avatar item-start>
      <img *ngIf="contact?.photos" [src]="contact.photos[0].value"/>
    </ion-avatar>

    <div>
      <p> {{ contact.displayName || contact.phoneNumbers[0].value }} </p>
    </div>

  </button>

</ion-list>

如何获取联系人的图片路径？

【问题讨论】：

标签： angular cordova ionic2 contacts ionic3

【解决方案1】：

import { DomSanitizer } from '@angular/platform-browser';

定义组件类方法

sanitizeImage(value){
 return this.sanitizer.bypassSecurityTrustUrl(value)
}

更改模板

<ion-avatar item-start>
  <img *ngIf="contact?.photos" [src]="sanitizeImage(contact.photos[0].value)"/>
</ion-avatar>

【讨论】：

【解决方案2】：

我只是用另一种方式解决了它。但请注意，我在 ionic 4 中使用了此代码。我使用了（WebView）插件。可以在这里找到（https://ionicframework.com/docs/native/ionic-webview1）。我的代码是这样的：

    contactList = [];
    constructor(private contacts: Contacts, private sanitizer: DomSanitizer, private router: Router, private callNumber: CallNumber, private contact: Contact, private webView: WebView) {
    // TODO
  }

     getContacts(): void {
        this.contacts.find(
            ['displayName', 'phoneNumbers', 'photos'],
            {multiple: true, hasPhoneNumber: true}
        ).then((contacts) => {
          for (let i = 0 ; i < contacts.length; i++) {
            if(contacts[i].displayName !== null) {
              const contact = {};
              contact['name']   = contacts[i].displayName;
              contact['number'] = contacts[i].phoneNumbers[0].value;
              if (contacts[i].photos != null && contacts[i].photos.length > 0) {
                console.log(contacts[i].photos[0].value);
                contact['image'] = this.webView.convertFileSrc(contacts[i].photos[0].value);
                console.log(contact['image']);
              } else {
                contact['image'] = 'assets/dummy-profile-pic.png';
              }
              this.contactList.push(contact);
            }
          }
        });
      }

现在在 html 文件中，你可以使用这段代码来显示输出：

    <div class="ion-padding">
          <ion-item *ngFor="let contactInfo of contactList">
            <ion-thumbnail slot="start">
              <ion-img [src]="contactInfo.image"></ion-img>
            </ion-thumbnail>
            <ion-label>
              <h2>{{ contactInfo.name }}</h2>
              <p>{{ contactInfo.number }}</p>
            </ion-label>
          </ion-item>
      </div>

【讨论】：

【解决方案3】：

private win: any = window;

if(item.photos != null)
{
    image= this.win.Ionic.WebView.convertFileSrc(item.photos[0].value);
}
else
{
    image = "assets/imgs/no_avata.png";
}

【讨论】：

虽然您的代码可能会提供问题的答案，但请在其周围添加上下文，以便其他人了解它的作用以及它存在的原因。