Question

我正在将图像上传到Firebase存储。图片已正确上传，我想在HTML图片标签中显示图片。我已经写了一个代码，但这似乎无法解决。请帮忙。

 <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;
})

更新以下评论以回答以下答案

下面的HTML代码

<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代码。

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;
     });

})

Answer 1

问题来自getDownloadURL()方法是异步的，并返回一个使用下载URL解析的Promise。

因此，您需要执行以下操作：

uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
   console.log('File available at', downloadURL);
   document.getElementById('profile-img-tag').src = downloadURL;
});

这样做

var downloadURL = uploadTask.snapshot.ref.getDownloadURL();
document.getElementById('profile-img-tag').src = downloadURL;

在第二行中，downloadURL的值为undefined，因为此行中的代码不会等待Promise解析。

是否想了解有关Promises和then()方法的更多信息？参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 2

更改此：

document.getElementById('profile-img-tag').src ="downloadURL";

对此：

document.getElementById('profile-img-tag').src = downloadURL;

downloadURL是一个包含图片网址的变量，因此请删除quotations

我想将上传的图像显示到html图像标签

2 个答案: