Unable to display contact photo in phonegap through angularjs

Question

I am able to fetch and display the contact photo from simple html and javascript but when I use angularjs model to display the contact photo, I get an error. Following is my source code :

List where I am trying to display the contact :

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

Here is my controller for setting 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

Finally after so much struggle I'll be able to find the issue,

Please paste the below lines in your App.js file and problem will get solved and the reason for not showing photo is that Angularjs adds unsafe: before each url if it is not trusted.

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

Answer 2

I was having this issue in Angular 2 with Ionic 2 but I didn't know this was the problem and I didn't know how to try the accepter answer in angular 2. For the sake of completeness, here is how you would fix it using Ionic 2:

Inject sanitizer: DomSanitizer in your controller/service.

then call: sanitizer.bypassSecurityTrustUrl(photoURL)

Here's an example:

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

    })
  }

}