Facebook 个人资料图片不与 <Image> 一起显示答案

【问题标题】：Facebook profile image is not displayed with <Image>Facebook 个人资料图片不与 <Image> 一起显示
【发布时间】：2016-01-28 16:09:31
【问题描述】：

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

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

我得到了什么：

<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 图片 URL 没有图片扩展的问题。

欢迎任何帮助。

谢谢:)

【问题讨论】：

即使 URL 不直接指向图像文件，那里仍然有图像。在加载 Facebook 图片时，使用 Google Chrome 的开发者工具等工具扫描网络活动，以查看图片的真正来源。
好的，谢谢。那么，为什么你认为我的 React Native 应用程序中没有显示图像？
我认为这是一个源问题。我会尝试编写一个给定“graph.facebook.com{userID}/picture?type=small”的函数，它将找到图像文件的正确位置并将其作为图像源传递。
我明白了。您是否有任何线索或任何点可以开始研究如何获取此源位置？我不知道如何开始。谢谢:)
你是否在样式中包含了 width 和 height 属性？

标签： image react-native

【解决方案1】：

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

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

如果您对此感兴趣，请提供更多详细信息：

Facebook 为您提供图形 url，但实际上将图像存储在 cdn 的其他位置。这让 facebook 可以在不破坏他们记录的 facebook graph url 的情况下移动资产。图 url 将重定向到实际 url，这意味着图 url 返回 302（非永久重定向）。

例如，目前我的个人资料图片将使用此 url 进行查询：

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答 createbang，但如果我删除一组引号，则会出现语法错误！ ://
这很奇怪。我复制了您的代码并在本地运行它，它只使用一组引号。您是否尝试过将 uri 设置为 Facebook 图像以外的其他内容（您肯定知道该图像是公开的并且可以使用）来运行代码？例如，https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png
对不起！我在引号和大括号之间感到困惑！我已经编辑了我的主要帖子，那些额外的引号是将代码复制到 Stackoverflow 的错误。在我的代码中没有额外的引号。谢谢！
我看不到您在此处链接的这张图片，错误 404。但我已尝试使用另一张图片，它显示完美。
好的，因此我们可以将问题隔离到您提供 uri 属性的 URL。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用 Facebook React Native SDK 可以轻松做到这一点（获取用户个人资料的图片）。

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

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

2) 在您的方法中实现 Facebook Graph 请求，例如“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 } } />

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

【讨论】：

这是下载图片而不是显示它，检查这个网址https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10218466988484935&height=200&width=200&ext=1553452039&hash=AeSo-QHBXC1UZzxK
是的，我的也在下载图片，不显示。我怎样才能暴露个人资料图片？
这里也一样，有什么解决办法吗？
@DanteCervantes 你解决了这个问题吗？

【解决方案5】：

对于像我这样多年后出现在这个线程中的人来说，为我解决这个问题的方法就是将 Facebook Graph URL 从 http 更改为 https。 React Native 之后就可以正常显示了。

【讨论】：