ionic 无法从http请求加载图像

Question

我正在尝试从 Google 地图街景 API 获取图像，这是我的服务：

.factory('WeatherService', function($http) {
   var GOOGLEMAP_KEY ="AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY";

   var urlGoogleStreetView = 'https://maps.googleapis.com/maps/api/streetview?key=' + GOOGLEMAP_KEY + '&size=480x320';

   return {
     pictureLocation: function (lat,lng,h,p){
         return $http.get(urlGoogleStreetView + '&location=' + lat + ',' + lng + '&heading=' + h + '&pitch=' + p);
     }
   };
});

这就是我在控制器中的称呼：

$scope.imageSource=WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);

在视图中它显示损坏的图像并给我“GET http://localhost:8100/%7B%7D 404（未找到）”错误，但是当我手动调用它时

$scope.imageSource="https://maps.googleapis.com/maps/api/streetview?key=AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY&size=480x320&location=46.414382,10.013988&heading=151.78&pitch=-0.76";

图像已完美加载。有人可以帮助我吗？

这是我的 HTML

<ion-content scroll="true" ng-controller="HomeCtrl">

  <h3>{{city}}</h3>
  <h5><weather-icon icon="current.currently.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
  <span class="large">{{current.currently.temperature}} &deg; </span><br>
  <img ng-src="{{imageSource}}">

</ion-content>

Answer 1

我的英文不是很好，但我会尽力解释。

ng-src 应等于 url 字符串。 在

$scope.imageSource=WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);

中，

$scope.imageSource

是图像数据，而不是 url 字符串。

在

$scope.imageSource="https://maps.googleapis.com/maps/api/streetview?key=AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY&size=480x320&location=46.414382,10.013988&heading=151.78&pitch=-0.76";

，

$scope.imageSource

是一个 url 字符串。

因此，使用您的服务将显示错误。

这样你就可以像这样编辑你的代码

.factory('WeatherService', function() {
var GOOGLEMAP_KEY ="AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY";

var urlGoogleStreetView = 'https://maps.googleapis.com/maps/api/streetview?key=' + GOOGLEMAP_KEY + '&size=480x320';

return {
 pictureLocation: function (lat,lng,h,p){
     return urlGoogleStreetView + '&location=' + lat + ',' + lng + '&heading=' + h + '&pitch=' + p;
     }
 };
});

Answer 2

如果您对 %7B%7D 进行 url 解码，它会返回 {}，这意味着 $scope.imageSource 返回一个空对象。您需要检查一下

WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);

返回图像的路径而不是空对象。