Trying to access a user's profile image stored in Firebase at /user/[uid]/info/photoURL
This is being done using Angular functions.
Here is the code snippet:
HTML:
<img ng-src="{{getImg(user.uid)}}" alt="">
Javascript:
$scope.getImg = function(uid) {
// return uid;
promise = firebase.database().ref("/users/" + uid + "/info/").once("value");
promise.then(function(snapshot) {
return snapshot.val().photoURL;
}, function() {
return "Error :(";
});
};
Encountering:
TypeError: snapshot.val(...) is nullAlternate approach attempted:
firebase.database().ref("/users/" + uid + "/info/").once("value").then(function(snapshot) {
return snapshot.val().photoURL;
});
No data returned with this method either.
Edit:
Structure of the data trying to load:
"[user uid]" : {
"info" : {
"name" : "Jett Jackson",
"photoURL" : "[URL to photo]"
}
}
Edit: Used in ng-repeat and for a single user.
Edit: Surrounding code snippet provided:
route.controller("dashController", ["$scope", "$http", "$routeParams", "$firebaseArray", "$firebaseObject", "$sce", function($scope, $http, $routeParams, $firebaseArray, $firebaseObject, $sce) {
var postsRef = firebase.database().ref().child("posts"),
query = ($firebaseArray(postsRef), postsRef.orderByChild("timestamp").limitToLast(5));
$scope.posts = $firebaseArray(query);
firebase.auth().onAuthStateChanged(function(user) {
user ? $scope.user = user : $scope.user.displayName = "Signed Out";
});
$scope.getImg = function(uid) {
// return uid;
promise = firebase.database().ref("/users/" + uid + "/info/").once("value");
promise.then(function(snapshot) {
return snapshot.val().photoURL;
}, function() {
return "Error :(";
});
};
}]);
HTML:
In the posts section:
<div ng-repeat="post in posts | reverse" class="item">
<a href="/#/post/{{post.$id}}"><div class="img">
<img src="{{post.thumbnail}}" alt="">
</div></a>
<div class="column center-vert">
<h1>{{post.title}}</h1>
<p>{{post.preview}}</p>
<div class="icons row">
<i class="icon-heart"></i>{{post.starCount}}<div class="pad"></div><i class="icon-user"></i>
<div class="timestamp">12 hours ago</div>
</div>
</div>
<div class="author">
<img src="{{getImg(post.uid)}}" alt="">
<p>{{post.author}}</p>
</div>
</div>
In the user view:
<div class="userImageContainer">
<img ng-src="{{getImg(user.uid)}}" alt="">
</div>