如何绑定来自Firebase存储的angularjs中的图像

如何从Firebase存储引用的angularjs视图中显示图像？我可以在控制台中打印网址，但无法访问。如何绑定来自Firebase存储的angularjs中的图像

服务代码

function getImageUrl(image) { 
     var url; 
     var pathReference = firebaseDataService.images.child(image); 
     return pathReference.getDownloadURL().then(function(url) { 
      return url;     
     }).catch(function(error) { 
      // Handle any errors 
     });   
    }

控制器代码

$scope.getImageUrl = function(image) { 
var imageUrl; 
    var imageUrl = Service.getImageUrl(image).then(function(url) { 
      imageUrl = url; 
      console.log(url); 
      return imageUrl; 
    }); 
    return imageUrl; 
}

查看

<div ng-repeat="category in categories"> 
    <img src="{{getImageUrl(category.image)}}"> 
</div>

来源

2016-07-11 Atul Sirpal

您应该由时间检索图像URL您检索类别并将其存储在一个diferent OBJ。 '' – adolfosrs

我在分类服务方法中获取类别，而不是在ng-repeat中，我打电话给存储服务以获取图像URL。 –

让我看看检索类别的方法。 – adolfosrs

到时候你找回您的类别，你可以遍历分类和检索每一个图像，将其存储在一个diferent范围对象，并在您的视图中使用它。

$scope.images = {}; 

categoriesSnapshot.forEach(function(category){ 
    Service.getImageUrl(category.val().image).then(function(url) { 
      $scope.images[category.key] = url; 
    }); 
});

在HTML：

<div ng-repeat="(key, val) in categories"> 
    <img src="{{images[key]}}"> 
</div>

来源

2016-07-11 18:18:54 adolfosrs

感谢您的解决方案，我发现图像不可见，由于这是由于消化周期和我使用$ scope。$ apply（）解决。 –

采用了棱角分明的标记像{{哈希}}在src属性不工作的权利：在浏览器将使用文本{{hash}}从URL获取，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

<img ng-src="{{getImageUrl(category.image)}}">

来源

2016-07-11 17:43:22 Vicheanak

仍然没有工作，我不知道，但我认为这是由于承诺 –

如何绑定来自Firebase存储的angularjs中的图像

回答

相关问题