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

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

更新以下 cmets 到下面的答案

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是一个包含图片url的变量，所以去掉quotations