title: Using ReadableStream as HTML <img> source
body: <p>I'm using fetch to dynamically load images from the server. How do I use the returned ReadableStream as an image source in my HTML? In the code example below data.body is a ReadableStream, so now how do I set an images source in the web page? Is there a way to use a pipe to image source?</p>
  
  <p>imageService.js</p>
  
  <pre><code>getImage(key) {
      if(key != null) {
          return this._downloadImageMap().then((imageMap) =&gt; {
              let uri = imageMap[key];
              if(uri != null) {
                  return this.client.fetch(uri).then((data) =&gt; {
                      return data.body;
                  });
              } else {
                  throw new Error('image not found');
              }
          });
      } else {
          return Promise.reject(new Error('no key specified'));
      }
  }
  </code></pre>
  
  <p>example desired usage (does not work):</p>
  
  <pre><code>this.imageService.getImage(this.skill).then((imgStream) =&gt; {
          $('#theImage').attr('src', 'data:image/png;base64,' + imgStream);
  });
  </code></pre>