Facebook profile image not showing with <Image>

Question

I have an application where I need to show a user profile picture.

Some users are logged in to Facebook, so we save their image on a Facebook profile, and when I try to make this image using the 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, the problem is that this Facebook image url does not have an image extension.

Any help is appreciated.

Thanks:)

Answer 1

The problem is that the facebook graph url is not the actual url where this image is stored. This is a redirect. There is a problem with responsive-gitub that tracks a similar problem (301 redirect). It seems to be partially resolved (works on 301 on iOS).

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

More information about this if you are interested:

Facebook gives you a graphic url but actually stores the image elsewhere on cdn. This allows facebook to move assets around without violating the URL of the facebook schedule they document. The graph URL will be redirected to the actual URL, which means that the graph URL returns 302 (non-persistent redirects).

For example, currently my pic profile will be requested using this URL:

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

But it redirects (currently) to this actual location:

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

Answer 2

It looks like you need to remove one set of quotes from the uri string.

Answer 3

I think the problems are with URL redirection. If you add &redirect=false at the end of your URL and use the url fields in the displayed data object, the image should display correctly.

I don’t know the main reason for this, but this workaround should help, even if it means writing more code.