Question

我正在关注Facebook制作移动网站应用程序的教程。但我无法从朋友那里加载图像。我明白了：

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

Answer 1

尝试将代码更改为：

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

正如@Gyan所提到的，看看开放式图形资源管理器，看看底层数据结构是什么样的。

Answer 2

你做的有点不对劲转到此链接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 + '"> '

你必须解析你悄悄地发现你正在放置一个对象而不是放置url所以更改你的代码并获取url因为src总是适用于图像url :)我可能会给你一个你错在哪里的想法

将其更改为

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

Answer 3

一般建议是检查方法返回的对象类型。由于您正在返回一个对象，因此很可能有一个像您可以从该对象引用的图像属性...类似于objectName.imageURI

无法使用facebook API加载好友图片

3 个答案: