unable to display contact data image in phonegap

Question

i am trying to fetch the contact profile pic i.e. avatar of contact data using following code in PhoneGap for android but i am getting following url in return and i don't know how should i show it in a img tag.

Code

  var defaultImagePath ='../resources/images/default_usr.png'

 var img = contacts[i].photos  != null ? 
     contacts[i].photos[0].value : defaultImagePath;

returned url is

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

now when eventually in a list i am trying to show it using

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

but its not displaying anything ? so how would i show the contact image ?

i have the latest PhoneGap version

i have used

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

but i am getting following run time error

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

even though i have specified 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 issue 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

beside AndroidManifest.xml, there are permission of phonegap at 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 also if all permission are granted for the JNI ERROR, that error can be permission error.

For the image, <img src="content://com.android.contacts/contacts/739/photo"/> make sure that contact id 739 has image setup since phonegap get_contact function always return a url format like content://com.android.contacts/contacts/XXX/photo where XXX is contact id, no matter what image is set or not.

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

Answer 3

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