javascript - 尽管我可以在控制台上看到 Blob 图像，但它不会显示在 UI 上

Question

我正在尝试创建多个 blob 图像，并在视频时间轴 UI 中显示它们。为了创建图像，我在某些特定时间范围内截取视频的屏幕截图，并创建 img 元素，然后添加 img.src 作为 blob 图像的 url。问题是 blob 图像未显示在 UI 上，尽管我可以在控制台上看到它们。有什么想法吗？

创建 blob 图像的代码片段:

// draw the video frame to canvas
const ctx = canvas.getContext("2d");
ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
ctx.canvas.toBlob(
    blob => {
        resolve(blob);
    },
    "image/jpeg",
    0.75 /* quality */
);

创建图像的代码片段:

let img = '';
for (let i = 0; i < count / 3; i++) {
    const cover = await GetVideoCover(item.video_url, i);
    var url = URL.createObjectURL(cover);
    var image = new Image();
    image.src = url;
    img += "<img src='"+image.src+"'>";
    console.log(img)
}
return img;

来自console.log(img)行的控制台日志:

实际的 html img 元素:

当我如下手动更新源时，它可以工作，但我不明白为什么它本身没有获取源。任何想法将不胜感激。

Answer 1

尝试在 image 元素上注册一个 onload 事件监听器，然后在事件监听器中处理依赖于该图像的所有代码，如下所示:

for (let i = 0; i < count / 3; i++) {
    const cover = await GetVideoCover(item.video_url, i);
    var url = URL.createObjectURL(cover);
    var image = new Image();
    image.src = url;
    image.addEventListener('load', (event) => {
    // perform some magic here e.g append to DOM or draw the image to canvas
    }
}