无法在 phonegap 中显示联系人数据图像

Question

我正在尝试使用PhoneGap 中的以下代码为android 获取联系人资料图片，即联系人数据的头像 但我得到了以下网址作为回报，我不知道应该如何在 img 标签中显示它。

代码

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

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

返回的网址是

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

现在，当最终在列表中时，我尝试使用

显示它

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

但它没有显示任何东西？那么我将如何显示联系人图片？

我有最新的PhoneGap 版本

我用过

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

但我得到以下运行时错误

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

即使我在 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" />

更新

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



    }

这里是图片功能

 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

请试试这个。

     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 2

几天前我遇到了这个问题，终于找到了解决方法。

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 3

除了AndroidManifest.xml，还有project\res\xml\config.xml的phonegap权限

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

请检查是否为 JNI ERROR 授予了所有权限，该错误可能是权限错误。

对于图片，<img src="content://com.android.contacts/contacts/739/photo"/> 确保联系人 id 739 已设置图片，因为 phonegap get_contact 函数始终返回类似content://com.android.contacts/contacts/XXX/photo 的 url 格式，其中 XXX 是联系人 id，无论是否设置了图片。

当我在 android 4 上使用 phonegap 2.5 进行测试时，<img src="content://com.android.contacts/contacts/739/photo"/> 可以工作，如果 uri 不包含图片，请联系图片或带有问号的小蓝色正方形