Angular中如何展示数据集内的外部托管图片？

问题根源 #

你遇到的[object%20Object] 404错误，是因为place.photos是数组对象，直接用{{place.photos}}插值会把对象转为字符串[object Object]，浏览器会将其当作本地路径请求，导致资源找不到。另外place.html_attributions无效，是因为这个字段不在place根对象下，而是嵌套在place.photos数组的每个元素中。

从你提供的截图来看，place.photos是数组结构，每个元素包含图片的版权声明（html_attributions）和图片标识（如photo_reference），而非直接的图片URL。

代码修改方案 #

1. 标准Google Places API场景 #

如果你的数据来自Google Places API，需要通过photo_reference构造图片请求URL，同时渲染版权信息：

<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>
                    <!-- 图片及版权信息区域，增加空值判断避免报错 -->
                    <div *ngIf="place.photos && place.photos.length > 0" class="p-3">
                        <img 
                            src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference={{place.photos[0].photo_reference}}&key=你的GoogleAPI密钥" 
                            class="img-fluid"
                            alt="{{place.name}}的图片"
                        >
                        <!-- 渲染版权HTML，用[innerHTML]解析标签 -->
                        <small class="d-block mt-2" [innerHTML]="place.photos[0].html_attributions[0]"></small>
                    </div>
                </div>
            </div>
        </div> 
    </div> 
 </div>

2. 后端自定义返回场景 #

如果你的后端已经在photo对象中返回了直接可用的图片URL（比如place.photos[0].url），可以简化为：

<!-- 替换图片区域代码 -->
<div *ngIf="place.photos && place.photos.length > 0" class="p-3">
    <img 
        src="{{place.photos[0].url}}" 
        class="img-fluid"
        alt="{{place.name}}的图片"
    >
    <small class="d-block mt-2" [innerHTML]="place.photos[0].html_attributions[0]"></small>
</div>

关键注意事项 #

• 必须增加*ngIf="place.photos && place.photos.length > 0"判断，避免当没有图片时出现空指针错误。
• 版权信息html_attributions是带HTML标签的字符串，需要用[innerHTML]绑定才能正确渲染链接，不能直接用插值{{}}。

内容的提问来源于stack exchange，提问作者Beth McCoy