Как использовать URL изображения, хранящийся в Firestore

Question

У меня есть изображение, загруженное в хранилище Firestore, которое я хочу отобразить на моем веб-сайте. Затем я сохраняю URL этого изображения в моем документе Firestore:

Я могу успешно ссылаться на данные для этого документа и всех остальных в коллекции, а затем отобразите в моем html следующим образом:

<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>
                            <a href="p.link" class="mat-raised-button color=accent">Click Me</a>
                        </div>
                    </mat-card>
            </div>
        </div>
    </cdk-virtual-scroll-viewport>
</ng-container>

Теоретически я бы предположил, что вызов ссылки на миниатюру, которая является URL-адресом изображения, приведет к отображению изображения. Тем не менее, результат:

Я неправильно ссылаюсь на URL изображения?

Answer 1

Изменить p.data.thumbnail на {{p.data.thumbnail}}