问题
I am uploading the image to the firebase storage. the image is uploading correctly and I want to display the image in the HTML image tag. I have written a code but this doesn't seem to work out. please help.
<img id="profile-img-tag" class=" circle img" src="" width="150px" height="150px">
function(){
var downloadURL = uploadTask.snapshot.ref.getDownloadURL();
console.log('imageUrl',downloadURL);
// var picurl = downloadURL;
// console.log('picurl',picurl);
//document.getElementById('profile-img-tag').src = picurl;
document.getElementById('profile-img-tag').src =downloadURL;
})
UPDATE following comments to answers below
HTML code below
<form id="upduserform">
<img id="profile-img-tag" class=" circle img" src="" width="150px" height="150px">
<label class="upload-group" id="uploadlabel"><b>Upload Profile Picture</b>
<input type="file" class="upload-group" id="file">
</label>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#profile-img-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file").change(function(){
readURL(this);
});
</script>
<table id="accList">
</table>
<div>
<button type="button" id="editBtn" onclick="turnOnEdit()" class="waves-effect waves light btn editpos">EDIT</button>
<button type="submit" onclick="turnOffEdit() " id="updBtn" class="waves-effect waves light btn updpos">UPDATE</button>
<button type="button" class="waves-effect waves light btn closepos" onclick="closeMypro()">CLOSE</button>
</div>
<!-- <a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a> -->
</form>
javascript code below.
var selectedFile
$("#file").on("change", function(event){
selectedFile = event.target.files[0];
$("#uploadbtn").show();
})
const updemp = document.querySelector('#upduserform');
updemp.addEventListener('submit', (e) => {
var fileName = selectedFile.name;
var storageRef = firebase.storage().ref("/ProfilePictures/'" + auth.getUid() + "' /" + fileName);
var uploadTask = storageRef.put(selectedFile);
uploadTask.on('state_changed', function(snapshot){
}, function(error){
}, function(){
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
document.getElementById('profile-img-tag').src = downloadURL;
});
})
回答1:
The problem comes from the fact that the getDownloadURL() method is asynchronous and returns a Promise that resolves with the download URL.
You therefore need to do as follows:
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
document.getElementById('profile-img-tag').src = downloadURL;
});
By doing
var downloadURL = uploadTask.snapshot.ref.getDownloadURL();
document.getElementById('profile-img-tag').src = downloadURL;
on the second line, the value of downloadURL will be undefined because the code in this line does not wait the Promise to be resolved.
Want to read more about Promises and the then() method? See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
回答2:
Change this:
document.getElementById('profile-img-tag').src ="downloadURL";
into this:
document.getElementById('profile-img-tag').src = downloadURL;
downloadURL is a variable that contains the url of the image, therefore remove the quotations
来源：https://stackoverflow.com/questions/58497339/i-want-to-display-the-uploaded-image-to-the-html-image-tag