Search code examples
angularjscordovaionic-framework

ionic cant load image from http request

I'm trying to get image from Google Map Street View API, here is my service:

.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);
     }
   };
});

and this is how I call it in controller:

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

in the View it show broken image and give me "GET http://localhost:8100/%7B%7D 404 (Not Found)" error, but when I call it manually

$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";

the image is loaded perfectly. Can anyone help me?

Here is my 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>
Solution

  • My English is not very good, but I will try my best to explain it.

    ng-src should equal a url string. in $scope.imageSource=WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);, the $scope.imageSource is image data, not a url string.

    in $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";, The $scope.imageSource is a url string.

    so, using your service will dispaly error.

    so you can edit your code like this

    .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;
     }
 };
});