How can I display the google user's profile picture correctly in angular?

Issue

I'm using firebase authentication and I have some data on the user, fx. the photoURL. When I try to display the image with that url, the image doesn't show up. But when I logged the url to the console and clicked the url, it opened the correct image. Why doesn't this code display the image?

<img class="align-self-start mr-5 img-thumbnail rounded-circle" src="{{user.photoUrl}}">

Solution

Instead of using

src="{{user.photoUrl}}"

use

[src]="user.photoURL"

Answered By - Kilgarra