如何从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>
在src属性中使用像{{hash}}这样的Angular标记不起作用：浏览器将从URL中获取文字文本{{hash}}，直到Angular替换{{hash}}中的表达式。ngSrc指令解决了这个问题。
<img ng-src="{{getImageUrl(category.image)}}">
当您检索类别时，您可以遍历类别并检索每个图像，将其存储在不同的范围对象中并在您的视图中使用它。
$scope.images = {};
categoriesSnapshot.forEach(function(category){
Service.getImageUrl(category.val().image).then(function(url) {
$scope.images[category.key] = url;
});
});
在超文本标记语言中：
<div ng-repeat="(key, val) in categories">
<img src="{{images[key]}}">
</div>
