提问者:小点点

ngrepeat中火力存储的图像不会显示


我正在尝试将图像从Firebase存储下载到ng重复。我使用的语法来自这里,也来自这里。

 .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不显示任何图像。然而,附加到scope的url显示了所有图像;在每个图像的大约一秒钟内从一张图像更改到另一张图像。Conosole. log($scope.url)显示下载网址不断变化。如果有人能帮我解决这个问题,我将不胜感激。


共1个答案

匿名用户

您可以直接绑定url,因为您在范围变量中有图像,

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