Создать изображение на лету и заменить src ранее существовавшего тега img

Question

Я немного схожу с ума от этого, и я надеюсь, что вы мне поможете.

Вариант использования: пользователь указывает свое имя.Когда он нажимает кнопку, запрос отправляется на серверную службу, которая генерирует изображение.Не обновляя страницу, пользователь должен видеть новое созданное изображение.

Поэтому я начал с тега img с предварительным изображением.

<img src="waiting.png" />

Затем, когда пользователь щелкнулКнопка Я выполняю следующую функцию:

function loadingImage() {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.src = userNameForImage;

    // This will print something like images/JJ.png
    console.log(userNameForImage);

    image.onload = function() {
      // Here resolve
    };
    image.onerror = function() {
      reject(new Error('Could not load image at ' + userNameForImage));
    };
  });
}

userNameForImage - путь + имя пользователя + расширение.

Когда я пытаюсь разрешить

resolve(image);

, я получаю эту ошибку: Ошибка: Не удалось загрузить изображение в images / JJ.png

То же самое, если я использую setTimeout ()

setTimeout(() => resolve(image), 10000);

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

В псевдокоде будет

1. Пользователь предоставляет свое имя
2. Пользователь нажимает вкнопка
3. Функция присоединяет слушателя к img, и создается обещание.
4. Запрос сделан на бэкэнд-сервис, который создаст образ.
5. После того, как изображениеможет быть загружен (== существует). Обещание должно быть разрешено
6. Затем src должен быть обновлен или заменен.

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