英文:
How to present an externally hosted image from a dataset on Angular
问题
目前，我正在在我的Angular前端从数据集中显示信息。对于数据集中的每个条目，我显示名称、地址、评分和图片。然而，我在显示图片方面遇到了一些问题。图片是存储在“html_attributions”中的外部HTML链接，该链接存储在“photos”对象内。
以下是我目前的代码：
<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">
地址：
{{ place.formatted_address }}
</div>
<div class="card-footer">
评分：
{{ place.rating }}
</div>
<img src="{{place.photos.html_attributions[0]}}">
</div>
</div>
</div>
</div>
</div>
我收到以下错误消息：
[object%20Object]:1 GET http://localhost:4200/[object%20Object] 404 (Not Found)
我还尝试过{{place.html_attributions}}，但没有成功。我会感激任何帮助！
英文:
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'.
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!
答案1
得分: 0
应该是：
// 以上的代码
<ng-container *ngFor="let photo of place?.photos">
<ng-container *ngFor="let htmlAttribution of photo?.html_attributions">
<img src="{{htmlAttribution}}">
</ng-container>
</ng-container>
// 以下的代码
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论