React - Accessing PhotoURL from Firebase user: Image not displaying-CodePudding

Using Material UI components such as Tooltip, IconButton, and Avatar, I've made this:

                                        <Tooltip title="Open settings">
                                            <IconButton
                                                onClick={handleOpenUserMenu}
                                                sx={{ p: 0 }}
                                            >
                                                <img
                                                    alt="pfp"
                                                    src={auth.currentUser.photoURL}
                                                />
                                                <Avatar
                                                    alt="Google Photo/Initial"
                                                    src={auth.currentUser
                                                            .photoURL}
                                                />
                                            </IconButton>
                                        </Tooltip>

As you can see, this photoURL isn't producing an image, despite in the source code actually being accessed from firebase properly, as can be seen below in the <img> tag (when I right click -> open in new tab, the image is definitely the right one and corresponds to the Google account I used to sign into my web application through Firebase):

To reiterate, the problem isn't accessing the photoURL of the Firebase user, but rather displaying it using either the native <img> or Material UI <Avatar> tag.

CodePudding user response：

Suddenly this works when the only line technically changed was within the <IconButton> (imported from "@mui/material/IconButton") as such:

from sx={{ p: 0 }} to sx={{ px: "15px" }}

This is the final edited code (with the <img> tag removed since it was simply used for testing):

                                        <Tooltip title="Open settings">
                                            <IconButton
                                                onClick={handleOpenUserMenu}
                                                sx={{ px: "15px" }} // only changed line
                                            >
                                                <Avatar
                                                    alt="Google Photo/Initial"
                                                    src={
                                                        auth.currentUser
                                                            .photoURL
                                                    }
                                                />
                                            </IconButton>
                                        </Tooltip>

I can only assume that this is what fixed my problem and turned the output into the following: