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秒。无论如何，在创建映像并加载后，我无法解决该操作。

使用伪代码将

用户提供他的名字
用户单击按钮
一个函数将一个侦听器附加到img上，并创建一个Promise。
已请求后端服务创建图像。
一旦图像可以加载（==存在），承诺就应该得到解决
然后，应该更新或替换src。

有人可以提供一些指导吗？我完全没有什么许诺，而我真的陷入了困境。谢谢

快速创建图像并替换现有img标签的src

0 个答案: