javascript - Using ReadableStream as HTML <img> source -

i'm using fetch dynamically load images server. how use returned readablestream image source in html? in code example below data.body readablestream, how set images source in web page? there way use pipe image source?

imageservice.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'));     } } 

example desired usage (does not work):

this.imageservice.getimage(this.skill).then((imgstream) => {         $('#theimage').attr('src', 'data:image/png;base64,' + imgstream); }); 

slightly different in way don't return imagedata after calling fetch (no need that)

plus don't use filereader worse memory & 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)  })