無法通過angularjs在phonegap中顯示聯系人照片

Question

我能夠從簡單的html和javascript中獲取並顯示聯系人照片，但是當我使用angularjs模型顯示聯系人照片時，出現錯誤。 以下是我的源代碼：

列出我要顯示聯系人的位置：

<ul class="list">

   <li class="item item-thumbnail-left" ng-repeat="contact in contactList">
            <img ng-src="{{contact.mphoto}}"/> <!--When I put this path directly ( ie "content://com.android.contacts/contacts/30/photo"), I am able to display the image, but when I fetch it from the controller, I am getting error: "unable to read contacts from asset folder" -->
           <h2>{{contact.name}}</h2>
           <p >{{contact.number}}</p>

   </li>
</ul>

這是我用於設置ContactList的控制器：

ContactService.find("").then(function(contacts) {
        for (var i = 0; i < contacts.length; i++)
        {
            if (contacts[i].phoneNumbers !== null)
            {
                for (var j = 0; j < contacts[i].phoneNumbers.length; j++)
                {
 var img = contacts[i].photos  != null ? contacts[i].photos[0].value : "img/default.png";

                    $scope.contactList.push({name: contacts[i].name.formatted, number: contacts[i].phoneNumbers[j].value, mphoto: img})
                }
            }
        }

Answer 1

經過這么多的努力，終於可以找到問題所在，

請將以下行粘貼到您的App.js文件中，問題將得到解決，並且不顯示照片的原因是Angularjs在每個網址（如果不受信任）前添加了不安全：

 config(['$compileProvider', function($compileProvider) {
            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
        }]);

Answer 2

我在Ionic 2的Angular 2中遇到了這個問題，但是我不知道這是問題所在，我也不知道如何在角度2中嘗試接受器答案。為了完整起見，這是解決問題的方法使用離子2：

注入sanitizer: DomSanitizer控制器/服務中的sanitizer: DomSanitizer 。

然后調用： sanitizer.bypassSecurityTrustUrl(photoURL)

這是一個例子：

export class HomePage {
  url;

  constructor(public navCtrl: NavController, platform: Platform, sanitizer: DomSanitizer) {
    platform.ready().then(() => {
      Contacts
        .pickContact()
        .then((contact) => {
          alert(JSON.stringify(contact));
          if (contact.photos) {
            var photoURL = contact.photos[0].value;
            this.url = sanitizer.bypassSecurityTrustUrl(photoURL);
          }
        });

    })
  }

}