Phonegap, AngularJs and contacts plugin: how to render contact image

Question

I did a lot of search but was unable to find the correct answer. I also checked other relative question in S.O. but they didn't help.

I use the Phonegap contacts plugin to fetch device contacts, one of the info is the contact picture, an object that has a 'value' property with a content like:

"content://com.android.contacts/contacts/1896/photo"

I haven't found a way to render this image, the classic

<img class="img-responsive img-rounded" ng-src="{{item.photos[0].value}}" />

doesn't work.

I have contacts saved with an image taken from the device gallery, so I expect to display it. The only thing I can see is a small white question mark with a blue background (I think it is the standard 'not found' image).

Permissions are set by plugin installation.

These are my currently installed plugins:

[ 'org.apache.cordova.camera',
  'org.apache.cordova.contacts',
  'org.apache.cordova.device',
  'org.apache.cordova.file',
  'org.apache.cordova.file-transfer'
  'org.apache.cordova.geolocation',
  'org.apache.cordova.network-inform
  'org.apache.cordova.splashscreen',
  'org.apache.cordova.vibration' ]

Phonegap version 3.4.0 Cordova version 3.4.1 AngularJS version 1.2.16

I hope somebody could help, also with a solution that fits the AngularJS way.

Thank you

Answer 1

Did you see this post?

Angularjs adds unsafe: before each url if it is not trusted.

Unable to display contact photo in phonegap through angularjs