Unable to display contact information image in phone gap

Question

I am trying to get pic contact profile, i.e. contact data avatar using the following code in PhoneGap for android but I get the following url in return and I don’t know how to show it to me in the img tag.

Code

  var defaultImagePath ='../resources/images/default_usr.png' var img = contacts[i].photos != null ? contacts[i].photos[0].value : defaultImagePath; 

return url

Content: //com.android.contacts/contacts/739/photo

now that I end up on the list I'm trying to show it with

 <img src="content://com.android.contacts/contacts/739/photo"/> 

but it doesn’t display anything? so how can i show the contact image?

I have the latest version of PhoneGap

I used

window.resolveLocalFileSystemURI (contacts [i] .photos [0] .value, this.onResolveSuccess, this.fail);

but i get the following runtime error

 JNI ERROR (app bug): attempt to use stale local reference in phonegap 

although I specified the following permissions in android

 <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> 

UPDATE

 loadContacts:function(){ var arr = []; var filter = ["displayName", "name", "phoneNumbers","emails","addresses","photos"]; var options = new ContactFindOptions(); options.filter=""; options.multiple=true; navigator.contacts.find(filter, function(contacts) { for (var i = 0; i < contacts.length; i++) { if (contacts[i].photos) { for (var j = 0; j < contacts[i].photos.length; j++) { returnValidPhoto(contacts[i].photos[j], function(answer) { console.log(answer); if(contacts[i].photos[j]!=null); contacts[i].photos[j].value=answer; }); var contactData = new ContactData("Name" , "09090909", contacts[i].photos[j].value); arr.push(contactData); } } } Ext.getStore('ContactStore').setData(arr); // document.getElementById("contactdata").innerHTML = data; }, function(err) { alert(err); },options); } 

here is the image function

  function returnValidPhoto(url,callback){ console.log("IMAGE CALLED"); var img = new Image(); img.onload = function() { //Image is ok console.log("IMAGE OK"); callback(url.value); }; img.onerror = function(err) { //Returning a default image for users without photo console.log("IMAGE FAILED"); url.value = "/resources/images/default_usr.png"; callback("/resources/images/default_usr.png"); } img.src = url.value; }; 

Answer 1

I came across this question a few days ago and finally found a workaround.

 var returnValidPhoto=function(url,callback){ var img = new Image(); img.onload = function() { //Image is ok callback(url); }; img.onerror = function(err) { //Returning a default image for users without photo callback("image_for_no_avatar.png"); } img.src = url; }; //Example usage returnValidphoto(contact.photos[0].value, function(answer) { contact.photos[0].value=answer; } 

Answer 2

Please try this.

  function onDeviceReady() { window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail); window.resolveLocalFileSystemURI("content://com.android.contacts/contacts/739/photo", onResolveSuccess, fail); } function onFileSystemSuccess(fileSystem) { console.log(fileSystem.name); } function onResolveSuccess(fileEntry) { console.log(fileEntry.name); } function fail(evt) { console.log(evt.target.error.code); } 

Answer 3

next to AndroidManifest.xml, there is a phonegap permission on project\res\xml\config.xml

  <plugins> <plugin name="App" value="org.apache.cordova.App"/> <plugin name="Device" value="org.apache.cordova.Device"/> <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/> <plugin name="Contacts" value="org.apache.cordova.ContactManager"/> <plugin name="File" value="org.apache.cordova.FileUtils"/> <plugin name="Storage" value="org.apache.cordova.Storage"/> ... </plugins> 

please check that if all permissions are granted for JNI ERROR, this error may be a permission error.

For the image <img src="content://com.android.contacts/contacts/739/photo"/> make sure that the contact ID 739 has the image setting, since the get_contact phonegap function always returns the format of the URL, for example content://com.android.contacts/contacts/XXX/photo , where XXX is the identifier of the contact, regardless of which image is installed or not.

As I test with phonegap 2.5 on Android 4, <img src="content://com.android.contacts/contacts/739/photo"/> is work, a contact image or a small blue square with a question mark inside, if uri does not contain an image