在 img src 中使用 google api 放置照片请求答案

【问题标题】：Place Photo Requests with google api in img src在 img src 中使用 google api 放置照片请求
【发布时间】：2017-08-19 13:56:31
【问题描述】：

我正在尝试使用 google places api 获取包含他们照片的位置列表。我将响应存储在变量 vm.locationList 中。在我看来，我正在迭代这个变量来显示位置列表。以下是代码

<div ng-repeat = "(key, value) in vm.locationList">
<div class="panel panel-primary">
  <div class="panel-body">
    <div class="col-md-2">
      <div class="pull-left thumbnail">
        <span ng-if="vm.getPhotos">
        <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY" class="img-responsive" style="margin-right:10px;">
      </span>
      </div>
    </div>
    <div class="col-md-10">
      <h4><b>{{value.name}}</b></h4>
      <p><i class="fa fa-map-marker" style="color:red"></i>&nbsp;{{value.vicinity}}</p>
      <p> open now: {{value.opening_hours.open_now}}</p>
    </div>
    <div ng-repeat = "type in  value.types">
      <p style="float:left;width:20%" class="tags">{{type}}<p>
    </div>
  </div>

</div>

现在要获取照片，我将 http url 请求放在 img 标签的 src 属性中。虽然我正在获取列表中的照片，但我在控制台中看到错误提示错误请求。以下是我在控制台中遇到的错误

GET https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY 400 ()

这是http响应

<title>Error 400 (Bad Request)!!1</title>

<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>400.</b> <ins>That’s an error.</ins>
<p>Your client has issued a malformed or illegal request.  <ins>That’s all we know.</ins>

【问题讨论】：

标签： angularjs google-places-api

【解决方案1】：

好的，我知道我做错了。我使用 Angular 的 ng-src 代替 src 属性。现在它工作正常。绑定之前没有工作。我很困惑，因为即使绑定不起作用，图像也会出现。

【讨论】：