Display contact photo using cordova + ionic + android


Is there anyway to display contact photo. Am struck and not able to move with this. I have tried pulling photos value from (contact.photos[0].value) it displays as : content://com.android.contacts/contacts/16954/photo.

I use the same path like below doesnt display anything on the mobile:
img ng-src="content://com.android.contacts/contacts/16954/photo" style="border:1px solid" width="100" height="100"

I have tried below methods:

  1. adding this in app config $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);

  2. Using window.resolvelocalfilesystemurl.

Even i have tried some pickContact samples from internet like http://www.raymondcamden.com/2014/07/09/Cordova-Plugin-update-and-new-Contacts-demo doesnt work on my mobile. The contact picture doesnt get displayed

Please help. Thank you

1 Like

Did you solve it? I am facing exactly the same issue.

1 Like

No actually i digged a lot at that time… couldnt solve the issue. read at many places that in ionic we cant get this done. But not sure if things changed now.

Contact Controller:

.controller('contactCtrl', function($scope, $cordovaContacts, $ionicPlatform, $ionicLoading, contactServ, $timeout) {

  $scope.contacts =[];

  $scope.getAllContacts = function() {
      $scope.contacts = _data;

// ===== auto load contacts ========


Contact Service:

factory('contactServ',function($ionicLoading, $cordovaContacts){

  function loadAllCont(callBack)
    $ionicLoading.show({template: '<ion-spinner class="spinner-energized" icon="lines"></ion-spinner> Accessing Contact List'});
    var opts = {                                              
      filter : '',                       
      multiple: true,      
      fields:  ['displayName', 'name', 'emails', 'photos']


Contact HTML

<ion-view title="Contact" cache-view="false">
<ion-content class="padding" >
<div class="list">
	<a class="item item-avatar" href="#" ng-repeat ="cont in contacts">
		<img src="{{cont.photos[0].value}}" ng-if="cont.photos.length > 0">
		<img src="img/user-avatar.jpg" ng-if="!cont.photos">
		<p ng-if="cont.phoneNumbers.length > 0" ng-repeat ="phn in cont.phoneNumbers"><span>{{phn.type}}:</span> {{phn.value}}</p>
		<p ng-if="cont.phoneNumbers.length == null"><span>Phone:</span> Not available</p>
1 Like

I saved photo on the phone and save only URL information on the photo contact and works.
Complete code available on https://github.com/AbrahimSA/Cordova-Contact-Camera-Geolocation-Media-Storage-Splashscreen

If you will get picture from camera you can use code:
//function cameraTakePicture() { – click imgAddContact
$( “#imgAddContact” ).click(function() {
// alert(“imgAddContact”);
navigator.camera.getPicture(onSuccess, onFail, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI

               function onSuccess(imageData) {
               $('#imgAddContact').attr('src', imageData);

               function onFail(message) {
                  alert('Failed because: ' + message);

you can save photo contact this way:

             var contact = navigator.contacts.create();
             contact.displayName = $("#contactName").val() ;
             var phoneNumbers = [];
             phoneNumbers[0] = new ContactField('mobile', $("#contactNumber").val(), true);
             contact.phoneNumbers = phoneNumbers;
                var photos = [];
              photos[0] = new ContactField('URL',  $("#imgAddContact").attr( "src" ), true);
               contact.photos = photos;


and to get the photo information you can use: contacts[i].photos[0].value

A post was split to a new topic: Use contacts.find

I Solve it by
<img [src]=“webView.convertFileSrc(content://com.android.contacts/contacts/16954/photo)” />