Facebook profile image is not displayed with <Image>

Question

I got an app where I have to show an user profile image.

Some users are logged in by Facebook, so we are saving their Facebook profile image and when I try to render this image with React Native Image component, the image is not displayed.

What I got:

<Image style={ styles.userImage } source={{uri: "http://graph.facebook.com/{userID}/picture?type=small" }} />

And styles:

userInfoContainer: {
  flex: 1,
  alignItems: 'center',
  paddingTop: 30,
  paddingBottom: 30,
  borderBottomWidth: 1,
  borderBottomColor: '#e5e5e5',
  backgroundColor: '#ffffff',
},

userImage: {
  height: 100,
  width: 100,
  borderRadius: 50,
  marginBottom: 20,
},

I don't know if the problem is that this Facebook image URL doesn't have image extension.

Any help is welcome.

Thanks :)

Answer 1

The issue is that the facebook graph url is not the actual url for where that image is stored. It is a redirect. There is an issue out on the react-native github which is tracking a similar issue (301 redirect). It looks like it is partially solved (working for 301's on iOS).

https://github.com/facebook/react-native/issues/4940

Some more details about this if you're curious:

Facebook gives you the graph url, but actually stores the image elsewhere on a cdn. This lets facebook move assets around without breaking the facebook graph url that they document. The graph url will redirect to the actual url, which means that the graph url returns a 302 (non-permanent redirect).

For example, currently my profile pic would be queried using this url:

https://graph.facebook.com/207537292916369/picture?type=large

But it will redirect (currently) to this actual location:

https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/15940479_407531822916914_4834858285678282755_n.jpg?oh=a49a86e0e8042e3df27ce3dfe871b958&oe=59327225