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://.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})
                }
            }
        }

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://.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})
                }
            }
        }

• javascript
• android
• angularjs
• cordova
• contact-list

• did you get to the bottom of this? I'm having the same issue? – user1255162 Commented Mar 31, 2014 at 20:18
• No luck yet, the same thing working in the IOS but not in android – Vivek Singh Commented Apr 1, 2014 at 10:44
• @user1255162 please refer below answer might it will gonna solve your issue too – Vivek Singh Commented Jul 14, 2014 at 10:18

2 Answers 2

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(['$pileProvider', function($pileProvider) {
            $pileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
        }]);

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

    })
  }

}