Question

我正在尝试将图像从firebase存储下载到ng-repeat中。我使用的语法来自here和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;
    })
   };

   })

这是我的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}}">

我的挑战是返回的网址不显示任何图片。然而，附加到范围的URL显示所有图像;在每个图像的大约一秒内从一个图像改变到另一个图像。 Conosole.log（$ scope.url）显示下载URL不断变化。如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

您可以直接绑定网址，因为您在范围变量中有图像

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

ngrepeat中firebase存储的图片不会显示

1 个答案: