Displaying a Facebook Auth photoURL in React

Question

I am using React and Firebase and receive the following when logged in

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

If I try to display this in JSX using:

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

nothing renders.

I notice navigating directly to the link doesn't actually show an image, but prompts a download. Any ideas?

Thanks.

Answer 1

Yes, it won't work. Because there is a typo and there is no tag named Image in HTML.
To display an image, you have to use an img tag.

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;

No Problem in the URL. Just make sure to use the correct tag.