Unable To Display Contact Photo In Phonegap Through Angularjs

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

Solution 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\//);
        }]);

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

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

    })
  }

}