Я хочу отобразить загруженное изображение в тег HTML изображения - PullRequest
Новая
       18

Я хочу отобразить загруженное изображение в тег HTML изображения

2 голосов
/ 22 октября 2019

Я загружаю изображение в хранилище 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;
     });

})

Ответы [ 2 ]

2 голосов
/ 22 октября 2019

Проблема заключается в том, что метод getDownloadURL() является асинхронным и возвращает Promise, который разрешается с помощью URL-адреса для загрузки.

Поэтому вам необходимо сделать следующее: 

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, так как код в этой строке не ожидает обещание бытьрешен.

Хотите узнать больше об обещаниях и методе then()? См https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

1 голос
/ 22 октября 2019

Измените это: 

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

на это: 

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

downloadURL - это переменная, которая содержит URL-адрес изображения, поэтому удалите quotations

...