如何从firebase存储中绑定angularjs中的图像答案

【问题标题】：How to bind image in angularjs from firebase storage如何从firebase存储中绑定angularjs中的图像
【发布时间】：2016-11-13 17:34:29
【问题描述】：

如何在 Firebase 存储参考的 angularjs 视图中显示图像？我可以在控制台中打印 url 但无法在视图中访问。

服务代码

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>

【问题讨论】：

您应该在检索类别并将它们存储在不同的 obj 中时检索图像 url。 <img src="{{images.categoryId}}">
我在单独的服务方法中获取类别，而不是在 ng-repeat 中我调用存储服务来获取图像 url。
让我看看检索类别的方法。
console.log(url); 中有什么？
@AtulSirpal 如果您取得了任何进展或仍有任何疑问，请告诉我。

标签： angularjs firebase firebase-storage

【解决方案1】：

在 src 属性中使用像 {{hash}} 这样的 Angular 标记无法正常工作：浏览器将从带有文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。 ngSrc 指令解决了这个问题。

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

【讨论】：

仍然无法正常工作，我不确定，但我认为这是由于承诺

【解决方案2】：

当您检索类别时，您可以遍历类别并检索每个图像，将其存储在不同的范围对象中并在您的视图中使用它。

$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>

【讨论】：

感谢您的解决方案，我发现图像不可见，因为这是由于消化周期，我通过使用 $scope.$apply() 解决了。