0

I am trying to download images from firebase storage into an ng-repeat. The syntax i am using i got from here and also from here. 

 .controller('tryCtrl',  function($scope,$firebaseStorage,$firebaseArray){
   $scope.user = 'OPD0wmF3syajsD94ANBBEQgzWPz2';
   const rootRef = firebase.database().ref();
   const ref = rootRef.child('UserData' + '/' + $scope.user);
   var list = $firebaseArray(ref);
   $scope.listOFProducts = list;



 $scope.getImageUrl = function(Image){
    var storageRef = firebase.storage().ref($rootScope.user + '/' + Image);
    var storage = $firebaseStorage(storageRef);

  return storage.$getDownloadURL().then(function(url) {
       $scope.url = url;
       console.log($scope.url);
      return url;
    })
   };

   })

Here is my html

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3" ng-repeat="items in details.Products">
         <div class="spacer" ng-init=""></div>

          <a class="button" data-toggle="modal" data-target="#myModal" ng-click="open(items)">

              <img ng-src="{{getImageUrl(items.Image)}}" class="img-responsive">
          </a>

              <p>{{items.Price}}</p>  
        </div>
<img ng-src="{{url}}">

My challenge is that the returned url does not display any image. The url attached to scope however displays all the image; changing from one image to another within about a second of each image. Conosole.log($scope.url) shows the download url constantly changing. I will be grateful if someone can help me figure this out.

Community
  • 1
  • 1
jaybaiden
  • 3
  • 2
  • The `getImageUrl` function returns a promise, not a URL. It is unwise to have Angular Expressons invoke asynchronous APIs. Don't do it. – georgeawg Feb 26 '17 at 22:03

1 Answers1

0

You could directly bind the url, since you have the image in the scope variable,

<img ng-src="url" class="img-responsive">
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396