Bilder von Firebase-Speicher in ngrepeat werden nicht angezeigt

Question

Ich versuche, Bilder aus Firebase-Speicher in eine ng-Wiederholung zu downloaden. Die Syntax, die ich verwende, habe ich von here und auch von 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; 
    }) 
    }; 

    }) 

Hier ist mein 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}}"> 

Meine Herausforderung besteht darin, dass die zurückgegebene URL kein Bild anzeigt. Die an den Bereich angehängte URL zeigt jedoch das gesamte Bild an. Wechsel von einem Bild zu einem anderen innerhalb von etwa einer Sekunde jedes Bildes. Conosole.log ($ scope.url) zeigt die Download-URL, die sich ständig ändert. Ich werde dankbar sein, wenn mir jemand helfen kann, dies herauszufinden.

Answer 1

Sie könnten die URL direkt binden, da Sie das Bild im Rahmen Variable haben,

<img ng-src="url" class="img-responsive">