在 React 中显示 Facebook Auth photoURL

Question

我正在使用 React 和 Firebase，登录后收到以下信息

photoURL: https://graph.facebook.com/10157648190117379/picture

如果我尝试使用以下方法在 JSX 中显示它：

<image src={this.props.user.photoURL} />

没有渲染。

我注意到直接导航到 link 实际上并没有显示图像，而是提示下载。有什么想法吗？

谢谢。

Answer 1

我试了一下，效果很好

import React from "react";
const TestCompOne = (props) => {
  console.log("[TEST COMP 1]");
  return (
    <div>
     <img src={"https://graph.facebook.com/10157648190117379/picture"} />
    </div>
  );
};

export default TestCompOne;

Answer 2

是的，这是行不通的。因为有错别字，HTML中没有名为Image的标签。
要显示图像，您必须使用 img 标签。

import React from 'react';
import './App.css';

class App extends React.Component {

  state = { url: 'https://graph.facebook.com/10157648190117379/picture'}

  render() {
    return <img alt='Profile' src={this.state.url} />;
  }
}
export default App;

URL 没有问题。请确保使用正确的标签。

在 React 中显示 Facebook Auth photoURL

Displaying a Facebook Auth photoURL in React

facebook

facebook-graph-api

firebase

reactjs

firebase-authentication