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图表网址不是存储图片的实际网址。这是一个重定向。 react-native github上存在一个跟踪类似问题的问题（301重定向）。看起来它已部分解决（在iOS上为301工作）。

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

如果你好奇，可以了解更多细节：

Facebook为您提供图表网址，但实际上将图片存储在cdn的其他位置。这让facebook可以移动资产而不会破坏他们记录的facebook图表网址。图表网址将重定向到实际网址，这意味着图表网址会返回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

Answer 2

看起来您必须从uri字符串中删除一组引号。

Answer 3

我认为问题在于图片网址重定向。如果您在网址末尾添加&redirect=false并使用所显示数据对象中的网址字段，则图片应正确显示。

我不知道主要原因，但这种解决方法应该有所帮助，即使这意味着编写更多代码。

Answer 4

使用Facebook React Native SDK可以轻松完成此操作（获取用户个人资料的图片）。

1）从 react-native-fbsdk 导入有用的类。

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

2）在您的方法中实施Facebook图形请求，例如'componentDidMount'，作为示例。

try {
  const currentAccessToken = await AccessToken.getCurrentAccessToken()

  const graphRequest = new GraphRequest('/me', {
    accessToken: currentAccessToken.accessToken,
    parameters: {
      fields: {
        string: 'picture.type(large)',
      },
    },
  }, (error, result) => {
    if (error) {
      console.log(error)
    } else {
      this.setState({
        picture: result.picture.data.url,
      })
    }
  })

  new GraphRequestManager().addRequest(graphRequest).start()
} catch (error) {
  console.error(error)
}

3）在您需要的地方使用this.state.picture的值。

<Image source={ { uri: this.state.picture } } />

我建议通过道具传递它，而不是作为有状态资源处理，但它将取决于您的需求。

Answer 5

对于那些像我一样多年后出现在这个线程中的人来说，为我修复它的事情只是将 Facebook Graph URL 从 http 更改为 https。之后 React Native 就可以正常显示了。

Facebook个人资料图片不会与<img/>一起显示

5 个答案: