How to use image url stored in Firestore - html

Question

I have an image uploaded to Firestore storage which I want to display on my website. I am then storing the url for this image in my Firestore document:
I can successfully reference the data for this document and all the others in the collection, then display in my html as so:
<ng-container *ngIf="infinite | async as products">
<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="nextBatch($event, (products[products.length - 1].data.productName))">
<div class="product-row" fxLayout="row wrap" fxLayout.xs="column wrap" fxFlexFill fxLayoutAlign="center center">
<div fxFlex.gt-xs="50%" fxFlex.gt-md="30%" *cdkVirtualFor="let p of products; let i = index; trackByIndex">
<mat-card class="product-tile">
<img class="product-thumbnail" src="p.data.thumbnail" [routerLink]="p.id">
<div class="product-brand">
{{ p.id }}
</div>
<div class="product-details">
<span id="product-name">{{ p.data.productName }}</span> <span id="product-price">{{ p.data.price }}</span>
</div>
<div class="add-to-pad-button">
<button (click)="openDialog(p.id)" mat-raised-button color="accent">Add to Pad</button>
Click Me
</div>
</mat-card>
</div>
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
In theory, I would assume that calling the reference to thumbnail, which is the image URL, would result in the image being displayed. However, the result is:
Am I incorrectly referencing the image URL?

Answer 1

Change p.data.thumbnail to {{ p.data.thumbnail }}