Показывать модальные изображения после загрузки с JS и Firebase

Question

Как показать модальное изображение после загрузки изображений в хранилище Firebase.

   imgRef1.put(file1).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
                snapshot.ref.getDownloadURL().then(function(downloadURL) {
                    console.log("File available at", downloadURL);
                    imgAns1 = downloadURL;
                });
   }).catch(error => {
        console.log("Error Occured");
   });;

Я загружаю файл с вышеуказанным кодом и получаю URL изображения. И затем я назначаю его для imageview sr c в модальном режиме.

 document.getElementById("imgSelectAns1").src = imgAns1;

Но когда модальное окно открывается, изображение не загружается, поскольку для его загрузки требуется некоторое время. Как открыть модал после успешной загрузки изображения?

Answer 1

Загрузка данных и получение URL-адреса загрузки являются асинхронными операциями. Пока идет вызов к серверу, остальная часть вашего кода продолжает выполняться. Затем, когда сервер вернул данные, ваш обратный вызов будет вызван.

Это проще всего понять, если вы поместите несколько операторов регистрации:

console.log("Starting upload...");
imgRef1.put(file1).then(function(snapshot) {
    console.log('Uploaded a blob or file. Getting download URL...');
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log("File available at", downloadURL);
        imgAns1 = downloadURL;
    });
    console.log("Started getting download URL");
}).catch(error => {
    console.error("Error occurred: "+error);
});
console.log("Started upload");

Если вы запустите этот код, вывод будет :

Начало загрузки ...

Начало загрузки

Загружен большой двоичный объект или файл. Получение загружаемого URL-адреса ...

Начало получения загрузочного URL-адреса

Файл доступен по адресу ...

Таким образом, код не выполняется в том же порядке, в котором он существует в вашем файле. Вместо этого обратные вызовы вызываются позже, после завершения вызовов к серверу. Из-за этого любой код, которому нужны данные с сервера, должен находиться внутри функции обратного вызова или вызываться оттуда.

Скорее всего, вы звоните document.getElementById("imgSelectAns1").src = imgAns1 откуда-то из Ваш код, когда imgAns1 = downloadURL еще не был вызван.

Исправление - переместить этот код в обратный вызов:

imgRef1.put(file1).then(function(snapshot) {
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
        document.getElementById("imgSelectAns1").src = downloadURL;
    });
}).catch(error => {
    console.error("Error occurred: "+error);
});