在 React 中显示 Facebook Auth photoURL答案

【问题标题】：Displaying a Facebook Auth photoURL in React在 React 中显示 Facebook Auth photoURL
【发布时间】：2020-12-06 13:14:08
【问题描述】：

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

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

如果我尝试在 JSX 中使用：

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

没有渲染。

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

谢谢。

【问题讨论】：

标签： reactjs firebase facebook facebook-graph-api firebase-authentication

【解决方案1】：

是的，它不会工作。因为有一个错字，并且 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;

网址没有问题。只要确保使用正确的标签。

【讨论】：

【解决方案2】：

我试试这个，效果很好

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;

【讨论】：