ionic无法从http请求加载图像

sd2nnvve 于 2023-10-14 发布在 Ionic

关注(0)|答案(2)|浏览(144)

我试图从谷歌Map街景图像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);

在视图中它显示破碎的图像和给予我“获取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>

ionic-framework

来源：https://stackoverflow.com/questions/36068995/ionic-cant-load-image-from-http-request

2条答案

按热度按时间

6l7fqoea1#

我的英语不是很好，但我会尽我所能解释它。
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;
     }
 };
});

赞(0）回复(0）举报 2023-10-14

anauzrmj2#

如果你对%7B%7D进行url解码，它会给你{}，这意味着$scope.imageSource返回一个空对象。您需要检查WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);
返回一个图像的路径，而不是一个空对象。

赞(0）回复(0）举报 2023-10-14