無法使用Facebook API加載朋友圖片

我正在關注Facebook的一個教程，用於製作移動網站應用程序。但我無法加載來自朋友的圖像。我得到這個：無法使用Facebook API加載朋友圖片

<img src="[object Object]">

它應該工作，因爲我複製從例如整個代碼（僅改變的appid）

下面是完整的代碼：

<html> 
<head> 
    <title>Hello World</title> 
    <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
    <meta property="og:title" content="Hello world" /> 
    <meta property="og:type" content="website" /> 
    <meta property="og:site_name" content="Hello World" /> 
    <meta property="og:description" content="Hello World! This is my mobile web sample app." /> 
    <meta property="og:image" content="http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png"/> 
</head> 
<body> 
    <div id="fb-root"></div> 
    <script> 
    (function() { 
     var e = document.createElement('script'); e.async = true; 
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
      document.getElementById('fb-root').appendChild(e); 
      }()); 
    </script> 

    <script> 
    window.fbAsyncInit = function() { 
     FB.init({ appId: '226909127331855', 
     status: true, 
     cookie: true, 
     xfbml: true, 
     oauth: true}); 

     FB.Event.subscribe('auth.statusChange', handleStatusChange); 
    }; 
    </script> 

    <script> 
    function handleStatusChange(response) { 
    document.body.className = response.authResponse ? 'connected' : 'not_connected'; 

    if (response.authResponse) { 
     console.log(response); 
     updateUserInfo(response); 
    } 
    } 
    </script> 

    <div id="login"> 
    <p><button onClick="loginUser();">Login</button></p> 
    </div> 
    <div id="logout"> 
    <div id="user-info"></div> 
    <p><button onClick="FB.logout();">Logout</button></p> 
    </div> 

    <script> 
    function loginUser() {  
     FB.login(function(response) { }, {scope:'email'});  
    } 
    </script> 

    <style> 
    body.connected #login { display: none; } 
    body.connected #logout { display: block; } 
    body.not_connected #login { display: block; } 
    body.not_connected #logout { display: none; } 
    </style> 

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

    <a href="#" onclick="getUserFriends();">Get friends</a><br> 
    <div id="user-friends"></div> 
    <script> 
    function getUserFriends() { 
    FB.api('/me/friends&fields=name,picture', function(response) { 
     console.log('Got friends: ', response); 

     if (!response.error) { 
     var markup = ''; 

     var friends = response.data; 

     for (var i=0; i < friends.length && i < 25; i++) { 
      var friend = friends[i]; 

      markup += '<img src="' + friend.picture + '"> ' + friend.name + '<br>'; 
     } 

     document.getElementById('user-friends').innerHTML = markup; 
     } 
    }); 
    } 
    </script> 

    <a href="#" onclick="publishStory();">Publish feed story</a><br> 
    <script> 
    function publishStory() { 
    FB.ui({ 
     method: 'feed', 
     name: 'I\'m building a social mobile web app!', 
     caption: 'This web app is going to be awesome.', 
     description: 'Check out Facebook\'s developer site to start building.', 
     link: 'http://www.facebookmobileweb.com/hello', 
     picture: 'http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png' 
    }, 
    function(response) { 
     console.log('publishStory response: ', response); 
    }); 
    return false; 
    } 
    </script> 

    <a href="#" onclick="sendRequest();">Send request</a><br> 
    <script> 
    function sendRequest() { 
    FB.ui({ 
     method: 'apprequests', 
     message: 'invites you to learn how to make your mobile web app social', 
    }, 
    function(response) { 
     console.log('sendRequest response: ', response); 
    }); 
    } 
    </script> 

    <fb:like></fb:like> 
</body> 
</html>

這裏是教程：https://developers.facebook.com/docs/mobile/web/build/

來源

2012-09-28 user1386906

+1讓我有機會在長時間之後再次看到fb開發者控制檯 –

你正在做的只有一點點錯誤去此鏈接face book developer tool for graph api for freindlist link

你會得到朋友像

{ 
     "name": "Nishant Porwal", 
     "id": "522901714", 
     "picture": { 
     "data": { 
      "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372008_522901714_1470071180_q.jpg", 
      "is_silhouette": false 
     } 
     } 
    }

，現在看你的代碼

'<img src="' + friend.picture + '"> '

你有解析你明智地發現，你正在放置一個對象，而不是放置網址所以改變你的代碼，並獲得網址，因爲src總是工作的圖像網址:)可能我給你一個想法，你錯了

改變它

'<img src="' + friend.picture.data.url + '"> '

來源

2012-09-28 18:56:21

讓我知道你是否有更多的困惑 –

感謝您的幫助。如果我遵循你的鏈接，那麼我只得到一個「名稱」和「ID」。像這樣：'{ 「name」：「Bella Ekkie」，「id」：「1398062267」 }'沒有'圖片'。我認爲這是問題，但我該如何解決這個問題？ – user1386906

在獲取下拉菜單的下一個區域中鍵入「me/friends＆fields = name，picture」，你會得到你的朋友列表，我認爲你是新的圖形API？ –

一般建議是檢查方法返回的對象類型。既然你是被返回的對象，有可能像圖像的屬性，你可以從該對象引用...像objectName.imageURI

來源

2012-09-28 18:39:23 Michael

試着改變你的代碼如下：

'<img src="' + friend.picture.data.url + '"> '

正如@Gyan提到，看看打開的圖形資源管理器查看底層數據結構是什麼樣子。

來源

2012-09-28 19:12:00 cpilko

+1支持我的回答 –

感謝您的幫助！ – user1386906

無法使用Facebook API加載朋友圖片

回答

相關問題