CODEWITHSUNDEEP
reactjsfirebase
Luka Miljković
Luka Miljković

Reputation: 126

Google profile picture not rendering

I can't figure out why my Google profile picture isn't showing after I log in. All of my other information can be displayed (email, name, etc.). This is the function for loging in with Google:

const signInWithGoogle = () => {
        signInWithPopup(auth, provider).then(result => {
            navigate('/todos');
        }).catch(err => {
          console.log(err);
        })
    }

And this is the whole Nav component where I want to display my name and profile picture for now:

import React, {useState, useEffect} from 'react';
import "../index.css";
import TemporaryDrawer from './Drawer';
import { Link } from 'react-router-dom';
import {onAuthStateChanged} from 'firebase/auth'
import {auth} from '../firebase-config';

function Nav() {

  const [user, setUser] = useState({});

  useEffect(() => {
      onAuthStateChanged(auth, (currentUser) => {
          setUser(currentUser);
      });

  }, [])

  return (
    <nav>
      <Link to='/todos' style={{ color: 'white' }}>{user ? user.displayName : "Not Logged In"}</Link>
      <img src={user?.photoURL} alt=""/>
      <TemporaryDrawer />
    </nav>
  )
}

export default Nav

Both user.displayName and user.email work perfectly, but user.photoURl doesn't work. Does this have to do with Firebase's storage?

Upvotes: 5

Views: 3875

Answers (2)

N.dhanush raj
N.dhanush raj

Reputation: 321

By adding referrerPolicy="no-referrer" in the img tag , we can solve the google image not showing problem !!!

<img src={data.user_image} referrerPolicy="no-referrer" />

Upvotes: 22

Luka Miljković
Luka Miljković

Reputation: 126

I was probably very tired and couldn't think, but the solution was quite easy, because I had the fix I needed in my own code. I just used the same method for displaying the users image as for displaying other information.

<img src={user ? user.photoURL : ""} alt="profile-pic" />

Upvotes: 0

Related Questions