0

我正在按照 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/

4

3 回答 3

3

尝试将您的代码更改为：

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

正如@Gyan 提到的，看看开放的图形浏览器，看看底层数据结构是什么样子的。

于 2012-09-28T19:12:00.153 回答
2

你在这个链接上做的有点不对

你会交到朋友，比如

{
      "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 + '"> '
于 2012-09-28T18:56:21.323 回答
0

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

于 2012-09-28T18:39:23.860 回答