How to bind image in angularjs from firebase storage

Question

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>

you should be retrieving the images url by the time you retrieve the categories and store them in a diferent obj. <img src="{{images.categoryId}}"> — adolfosrs
– adolfosrs, Commented Jul 11, 2016 at 17:43
I am getting categories in seperate service method and than in ng-repeat i am calling storage service to get image url. — Atul Sirpal
– Atul Sirpal, Commented Jul 11, 2016 at 17:53
@AtulSirpal Let me know if you made any progress or if you still have any doubts. — adolfosrs
– adolfosrs, Commented Jul 12, 2016 at 16:32

Vicheanak · Accepted Answer · 2016-07-11 17:43:22Z

1

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

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

answered Jul 11, 2016 at 17:43

Vicheanak

6,70620 gold badges67 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atul Sirpal Over a year ago

Still not working,I am not sure but i think this is due to promise

adolfosrs · Accepted Answer · 2016-07-11 18:18:54Z

0

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>

answered Jul 11, 2016 at 18:18

adolfosrs

9,3896 gold badges45 silver badges69 bronze badges

1 Comment

Atul Sirpal Over a year ago

Thanks for your solution,I found images were not visible due to It was due to digest cycle and I resolved by using $scope.$apply().

Collectives™ on Stack Overflow

How to bind image in angularjs from firebase storage

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related