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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments