Angular 9 | Firebase Storage | GET 404 error on [object%20HTMLImageElement]

Question

I'm currently implementing image upload in my Angular project. I'm using Firebase Storage to store these images.

In my HTML file I check if the image is available and if it is, display it:

<img *ngIf="avatar" [src]="avatar" #avatar>

Avatar is set when I have uploaded the image. When an avatar is uploaded I am trying to display it to my template as a preview. Then I get this error:

GET http://localhost:4200/[object%20HTMLImageElement]

The avatar variable is just a string to the URL: https://firebasestorage.googleapis.com/v0/b/openix-crm.appspot.com/o/contact_images%2F2014-07-24%2021.23.45.jpg?alt=media&token=90018c6d-3316-4db4-911b-dd7d204c84aa

I've tried this, without much luck:

<img *ngIf="avatar" [attr.src]="avatar" #avatar>
<img *ngIf="avatar" [src]="avatar | async" #avatar>

Answer 1

Looks like the template reference #avatar is being used as the value instead of the other avatar variable (that I'm assuming is there in the *.component.ts file). You can rename all #avatar and it's references to something like #avatarTemplate, or the opposite - rename the avatar variable (that is in the .ts and holds the url) and its references to avatarUrl.

If you have avatar in the .ts as a template reference variable as well, create a new variable to hold the url (something like avatarUrl) and store it there.

EDIT (Sorry, I don't have enough reputation to make a comment): While I have never faced an issue with letting Angular parse string URLs, @Silvermin's answer also works, but make sure that you rename #avatar and its references or create a new variable to hold the url (whichever is convenient for you), then try their answer :)