如何从Facebook JavaScript SDK获取个人资料图片？

Question

我正在尝试从Facebook获取个人资料照片。目前我能够从Facebook获取所有信息，但无法获取用户的个人资料照片。以下是我的代码：

function getFBData () {
    FB.api('/me', function(response) {
      fbinfo = new Array();
      fbinfo[0] = response.id;
      fbinfo[1] = response.first_name;
      fbinfo[2] = response.last_name;
      fbinfo[3] = response.email;
      FB.api('/me/picture?type=normal', function (response) {
         var im = document.getElementById("profileImage").setAttribute("src", response.data.url);
         alert(im);
        }); 

如何从API的响应中获取图片。

- Raghav Singh

---

你是否已经通过FB.login()中的范围请求了“user_photos”权限？ - Luke Peterson

在尝试将response.data.url插入DOM之前，确保它实际上包含了一些内容。 - Luke Peterson

用户照片权限仅适用于个人资料图片，如果您想要访问所有个人资料图片和相册，则需要该权限。 - andyrandy

@LUKE Peterson，我想要获取当前用户的头像。 - Raghav Singh

@Luke Peterson，我已经调用了FB.login函数，现在我只需要个人资料图片。 - Raghav Singh

你试过 console.log(response) 吗？ - andyrandy

Answer 1

为什么不直接使用已检索到的ID并直接显示图像呢？为什么需要进行额外的调用？

例如

function getFBData () {
FB.api('/me', function(response) {
  fbinfo = new Array();
  fbinfo[0] = response.id;
  fbinfo[1] = response.first_name;
  fbinfo[2] = response.last_name;
  fbinfo[3] = response.email;

     var im = document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal");
});
}

例如，http://graph.facebook.com/4/picture?type=normal 会重定向到马克·扎克伯格的照片。如果您遇到问题，请记录下URL以确保您获得了有效的ID，并将URL粘贴到浏览器中。

- TommyBs

Answer 2

@hiraa是正确的，但是代码缺失了。这是代码：

FB.api('/me', {fields: 'id,name,email,picture'}, function (response) {
    var picture_url = picture.data.url;
});

- Pablo S G Pacheco

---

这并没有提供问题的答案。如果要对作者进行批评或请求澄清，请在他们的帖子下留言。-【来自审查】 - MikeT

@MikeT 他们并不是在要求澄清，而是在给予hiraa认可，因为他提出了更改建议但没有提供代码。 - BSMP

没错。不过，你想让我改变我的答案吗？ - Pablo S G Pacheco

太好了！运行正常！谢谢。但是图片太小了，怎么才能让它变大？再次感谢！ - DevRenanGaspar

应该是 response.picture.data.url; - Mohsen TOA

@DevRenanGaspar 现在已经很晚了，但是如果你想要更大的个人资料图片，可以使用以下代码： FB.api('/me', {fields: 'id,name,email,picture.width(500).height(500)'}, function (response) { var picture_url = response.picture.data.url; }); - Mohsen TOA

Answer 3

尝试类似。

FB.api("/me", {fields: "id,name,picture"}, function(response)
{

    FB.api(
            {
                method: 'fql.query',
                query: 'SELECT pid, src_big, src_big_height, src_big_width FROM photo WHERE aid IN ( SELECT aid FROM album WHERE owner="' + response.id + '" AND name = "Profile Pictures")'
            },
            function(data1) {
                alert( data1[0].src_big );
            }
    );

});

这将给你图片的链接，你可以适当地使用它。

另一种选择

- cracker

---

你的链接重定向到了不想要的广告页面。 - Eem Jee

这是非常旧的帖子，有可能已经被删除或更改了。 - cracker

Answer 4

我尝试过这个方法，成功运行。请试试以下步骤：

FB.api('/me', { fields: 'id, name, email' }, function(response) 
{
    var userInfo = document.getElementById('user-info');
    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name ;

});

希望您已经得到了答案。

- Rahul Sinha

Answer 5

try this:

FB.api('/me/picture?type=normal', function(response) {
    var str="<img style='border: 3px solid #3a3a3a;' src='"+response.data.url+"'/>";
    return str;
});

- NotFound Life

Answer 6

function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
    document.getElementById('profilepic').innerHTML = '<img src="'+response.picture.data.url+'"/>';

}); }

- Toki

Answer 7

我知道这篇文章很旧，但其他答案会给我的网站带来破损的链接（将用户ID与其余URL连接起来以获取图像）。

我发现正确的方法如下（根据官方文档：https://developers.facebook.com/docs/graph-api/reference/user/picture/）：

/* make the API call */
FB.api(
    "/{user-id}/picture",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

从官方文档中了解到，获取用户的个人资料图片的方法为：

- Tomer Gal

Answer 8

不应该是response.data.url...尝试使用response.picture.data.url

- hiraa

Answer 9

你可以尝试这些例子：

function(){
  var url=null;
    FB.getLoginStatus(function(response){

  if (response.status === 'connected') {
    console.log("getting photo")
    FB.api(
    "/me/picture",
    function (response) {
      if (response && !response.error) {
      console.log(response);
      url=response.data.url;
      console.log(url);
    }else {
      console.log("Error Occured");
    }
    }
);
  }
});
  return url;
};

- Kafi Junior

Answer 10

您可以从此链接中按照说明进行操作 > https://developers.facebook.com/docs/facebook-login/web/

当您尝试获取个人资料响应时，默认情况下只会获得id和name

FB.api('/me', function(response) {
  console.log('Successful login for: ' + response);
});

但是如果你想获取电子邮件和图片，你需要像这样添加参数

FB.api('/me' {fields: "id, name, email, picture"}, function(response) {
  console.log('Successful login for: ' + response);
});

- tum