Firebase storage image doesn't show

Question

I want to let users upload profile pictures and I do this by using html file API.

Below is my code for uploading and showing the profile picture:

uploadPic.addEventListener('change',function(evt){
    var file = this.files[0];
    firebase.storage().ref().child(user_uid + "/" + file.name).put(file).then(function(){
        console.log("uploaded to storage");
    }).catch(function(e){
        console.log(e.message);
    });

    firebase.storage().ref().child(user_uid + "/" + file.name).getDownloadURL().then(function(url){
        user.updateProfile({photoURL: url}).then(function(){
            console.log("change success");
        }).catch(function(e){
            console.log(e.message);
        });
    }).catch(function(e){
        console.log(e.message);
    });
});

/*profile pic*/
if(user.photoURL===null){
    profilePic.src = "image/anonymous_big.png";
}else{
    console.log(user.photoURL);
    profilePic.src = user.photoURL;
}

Whenever the user changes the file it will upload to firebase storage then downloaded as URL and give the value to user.photoURL.

The picture was uploaded and downloaded successfully, however the profile picture looks like this:
the profile picture

If I console.log(user.photoURL) and click the url in console it shows the correct picture. I have no idea what went wrong. Thanks in advance.

Answer 1

Based on your comment detailing the error "permission denied", you should double check your Storage access rules.