Question

我正在尝试使用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>

Answer 1

好吧，我有错误的地方。我使用Angular的ng-src代替src属性。现在它的工作正常。绑定没有提前工作。我感到困惑，因为即使绑定不工作，图像也出现了。

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

1 个答案: