image - Facebook 个人资料图片未与 <Image> 一起显示

Question

我有一个应用程序，我必须在其中显示用户个人资料图片。

一些用户是通过 Facebook 登录的，所以我们正在保存他们的 Facebook 个人资料图片，当我尝试使用 React Native 渲染此图片时 图片 组件，图像不显示。

我得到了什么:

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

和样式:

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

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

我不知道问题是不是这个 Facebook 图片网址没有图片扩展名。

欢迎任何帮助。

谢谢 :)

Answer 1

问题是 facebook 图形 url 不是该图像存储位置的实际 url。这是一个重定向。 react-native github 上存在一个问题，它正在跟踪类似的问题(301 重定向)。看起来它已部分解决(适用于 iOS 上的 301)。

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

如果您好奇，可以了解更多有关此的详细信息:

Facebook 为您提供图形 URL，但实际上将图像存储在 CDN 上的其他位置。这让 facebook 可以移动 Assets 而不会破坏他们记录的 facebook graph url。图 url 将重定向到实际 url，这意味着图 url 返回 302(非永久重定向)。

例如，目前我的个人资料图片将使用以下网址进行查询:

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

但它会(当前)重定向到这个实际位置:

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