Can't display Facebook user avatar with Facebook API and Graph

[msqar]

🐛 Bug Report

There seems to be an issue at the moment when trying to get the profile picture URL.

There are also several reports of this in stackoverflow, but still, it doesn't seem to be solved.

Attempted many ways but none worked, it always tries to download the file, seems it's missing the mime-type according to what the browser says.

The URL it gives is the following: https://platform-lookaside.fbsbx.com/platform/profilepic/?asid={{myfbid}}&height=50&width=50&ext=1583348357&hash=AeTnFpMVwBXgFy_J

Also tried using the graph url directly: http://graph.facebook.com/{myid}/picture

And if I add the &redirect=false, it returns a data object with the platform-lookaside URL.

Everything I try, it tries to download.

This is how I'm currently trying to get the image using Graph API.

new GraphRequestManager().addRequest(new GraphRequest(
                '/me',
                {
                    accessToken: fbToken,
                    parameters: {
                        fields: {
                            string: 'picture.type(large)'
                        }
                    }
                },
                graphRequestCallback
            )).start();

It works, but the URL is the same.

Any idea on how can I solve this? I might be missing something or the bug is still happening?

Of course, if I use this URL given within an Image component source, it doesn't work.

Environment

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Memory: 53.05 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 8.16.2 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: ^0.60.6 => 0.60.6
  npmGlobalPackages:
    react-native-cli: 2.0.1

[Rratio]

@msqar Because you don't padd your fb id to get image url :- use this way for get url in graphApi new GraphRequest('/me?fields=id,email,name,picture.type(large)', null,

[msqar]

@Rratio attempted doing that, the data retrieved has the weird URL. After so much research, my friend on server-side handled this by downloading the image or something like that. Thanks for replying though. It might help other people.

[gmertk]

Hey @msqar,

Not sure why it doesn't work for you. But check out the basic code sample below which works as expected. Note that Image needs a width and a height.

/**
 * @format
 * @flow
 */

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, Button, Image} from 'react-native';

import {
  LoginButton,
  AccessToken,
  GraphRequest,
  GraphRequestManager,
} from 'react-native-fbsdk';

const App = () => {
  const [pictureURL, setPictureURL] = useState(null);
  const [pictureURLByID, setPictureURLByID] = useState(null);

  console.log(pictureURLByID);

  return (
    <>
      <SafeAreaView style={styles.container}>
        <LoginButton
          onLoginFinished={(error, result) => {
            if (error) {
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
              });
            }
          }}
          onLogoutFinished={() => console.log('logout.')}
        />

        <Button
          onPress={() => {
            const infoRequest = new GraphRequest(
              '/me?fields=picture',
              null,
              (error, result) => {
                if (error) {
                  console.log('Error fetching data: ' + JSON.stringify(error));
                } else {
                  console.log(JSON.stringify(result, null, 2));
                  setPictureURL(result.picture.data.url);
                  setPictureURLByID(
                    `https://graph.facebook.com/${result.id}/picture`,
                  );
                }
              },
            );
            new GraphRequestManager().addRequest(infoRequest).start();
          }}
          title="/me"
        />
        {pictureURL && (
          <Image style={styles.image} source={{uri: pictureURL}} />
        )}
        {pictureURLByID && (
          <Image style={styles.image} source={{uri: pictureURLByID}} />
        )}
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
  },
  image: {
    width: 50,
    height: 50,
  },
});

export default App;

[anastely]

Hey @gmertk It's work perfect, But I want to send these data to our API, But picture it's so small as default 50x50, So is there a way to get it with different width and height directly from graph API?

[Rratio]

@anastely you can get max 200 height width of dp by provide picture.large in fields

[anastely]

@Rratio thank u, actually picture.type(large) that's work

[ahtisham09]

@Rratio i am trying to use picture.type(large) its not working for me

const infoRequest = new GraphRequest( '/me', { accessToken: accessToken, parameters: { fields: { string: 'name,email,picture.type(large)', }, }, }, responseInfoCallback, );

[chinyart]

@Rratio i am trying to use picture.type(large) its not working for me

const infoRequest = new GraphRequest( '/me', { accessToken: accessToken, parameters: { fields: { string: 'name,email,picture.type(large)', }, }, }, responseInfoCallback, );

@ahtisham09 remove the .type(large)

[AmrGamal]

You can use width and height as mentioned here https://developers.facebook.com/docs/graph-api/reference/user/picture/