Blob图片在视频时间线UI不显示但控制台可见，求排查思路

问题根源 #

你代码里的核心问题是Blob URL的生命周期与JS变量垃圾回收的冲突：

• 循环内的cover（Blob对象）和临时image实例都是局部变量，循环结束后会被JS引擎标记为可回收。
• URL.createObjectURL生成的URL依赖Blob对象的存活引用，一旦Blob被回收，对应的URL就会失效，导致插入DOM时图片加载失败。
• 手动修改src时，控制台日志临时保留了Blob的引用，所以URL还能正常访问。

修复方案 #

方案1：保留Blob引用，防止被回收

在外层作用域声明数组存储所有Blob对象，确保它们始终有存活引用：

// 全局或父作用域定义数组，用于保存Blob引用
const activeBlobs = [];
let imgHtml = '';

for (let i = 0; i < count / 3; i++) {
    const cover = await GetVideoCover(item.video_url, i);
    activeBlobs.push(cover); // 保存Blob，避免被回收
    const blobUrl = URL.createObjectURL(cover);
    imgHtml += `<img src="${blobUrl}">`;
}

return imgHtml;

方案2：直接操作DOM（更稳定，推荐）

放弃拼接HTML字符串的方式，直接创建img元素并插入DOM，DOM会自动持有Image对象的引用：

// 假设你的时间线容器ID是timeline-container
const timelineContainer = document.getElementById('timeline-container');
const activeBlobs = [];

for (let i = 0; i < count / 3; i++) {
    const cover = await GetVideoCover(item.video_url, i);
    activeBlobs.push(cover);
    
    const blobUrl = URL.createObjectURL(cover);
    const img = document.createElement('img');
    img.src = blobUrl;
    timelineContainer.appendChild(img); // 直接插入DOM
}

额外优化：清理资源避免内存泄漏

当不再需要这些图片时（比如页面卸载、时间线销毁），记得主动释放Blob URL资源：

// 清理函数
function cleanupTimelineBlobs() {
    activeBlobs.forEach(blob => {
        const url = URL.createObjectURL(blob);
        URL.revokeObjectURL(url);
    });
    activeBlobs.length = 0;
}

// 示例：页面关闭时清理
window.addEventListener('beforeunload', cleanupTimelineBlobs);

补充检查点 #

• 确认GetVideoCover函数中，视频帧已经完全加载：在调用drawImage前，要确保videoPlayer已经触发loadeddata事件，否则canvas可能绘制空帧。
• 检查canvas的尺寸是否与视频帧匹配，避免绘制出空白内容。

内容的提问来源于stack exchange，提问作者ilketorun