0

So currently, I'm displaying info from a dataset on my angular front end. For each entry in the dataset, I'm showing the name, address, rating, and image. I'm having some trouble displaying the image, however. The image is an external HTML link stored in 'html_attributions' which is stored within the object 'photos'.

enter image description here

Below is the code I currently have:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor="let place of place_list | async">
                <div class="card text-white bg-secondary mb-3">
                    <div class="card-header">
                        {{ place.name }}
                    </div>
                    <div class="card-body">
                        Address:
                        {{ place.formatted_address }}
                    </div>
                    <div class="card-footer">
                        Rating:
                        {{ place.rating }}
                    </div>
                    <img src = "{{place.photos}}">

                </div>
            </div>
        </div> 
    </div> 
 </div>

I'm getting this error: [object%20Object]:1 GET http://localhost:4200/[object%20Object] 404 (Not Found)

I've also tried {{place.html_attributions}}, which hasn't worked. I'd appreciate any help!

Beth McCoy
  • 33
  • 5

1 Answers1

0

It should be:

// code above
<ng-container *ngFor="let photo of place?.photos">
    <ng-container *ngFor="let htmlAttribution of photo?.html_attributions">
         <img src="{{htmlAttribution}}">
    </ng-container>
</ng-container>
// code below
Vigneshwaran Sourirajalu
  • 117
  • 4