如何从firebase存储中绑定angularjs中的图像 [英] How to bind image in angularjs from firebase storage

问题描述

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

服务代码

  function getImageUrl（image）{
 var url; 
 var pathReference = firebaseDataService.images.child（image）; 
 return pathReference.getDownloadURL（）。then（function（url）{
 return url; 
））。 $ b}）; 
 
 $ / code> 

控制器代码

<$ pre $ $ var $ image $;
var imageUrl = Service.getImageUrl（image）.then（function（url）{
imageUrl = url;
console.log（url）;
return imageUrl;
}）;
return imageUrl;

$ / code>

查看



 < div ng-repeat =category in categories> 
< img src ={{getImageUrl（category.image）}}> 
< / div> 
  




解决方案

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

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




How to show image in angularjs view from Firebase Storage reference? I can print url in console but can't access in view.

Service Code

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
        });         
    }

Controller Code

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

View

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

解决方案

By the time you retrieve your categories you can loop over the categories and retrieve each image, store it in a diferent scope object and use it in your view.

$scope.images = {};

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

In your HTML:

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

这篇关于如何从firebase存储中绑定angularjs中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！