javascript - 使用 ReadableStream 作为 HTML 源

Question

我正在使用 fetch 从服务器动态加载图像。如何在我的 HTML 中使用返回的 ReadableStream 作为图像源？在下面的代码示例中，data.body 是一个 ReadableStream，那么现在如何在网页中设置图像源呢？有没有办法使用管道连接图像源？

图片服务.js

getImage(key) {
    if(key != null) {
        return this._downloadImageMap().then((imageMap) => {
            let uri = imageMap[key];
            if(uri != null) {
                return this.client.fetch(uri).then((data) => {
                    return data.body;
                });
            } else {
                throw new Error('image not found');
            }
        });
    } else {
        return Promise.reject(new Error('no key specified'));
    }
}

所需用法示例(不起作用):

this.imageService.getImage(this.skill).then((imgStream) => {
        $('#theImage').attr('src', 'data:image/png;base64,' + imgStream);
});

Answer 1

调用 fetch 后我不返回 imageData 的方式略有不同(不需要)

另外，我不使用 FileReader，这对内存和 CPU 来说更糟糕

getSkillImage(key) {
  return key 
  ? this._downloadImageMap().then(imageMap => {
    let {path} = imageMap[key]
    return path 
      ? this.client.fetch(path).then(response => response.blob())
      : Promise.reject(new Error('image not found'))
  })
  : Promise.reject(new Error('no key specified'))
}

this.imageService.getSkillImage(this.skill).then(imageData => {
  this.imageLoaded = true
  let src = URL.createObjectURL(imageData)
  $('#' + this.skill + '> img').attr('src', src)
})