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?

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);
});

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?

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);
});

• javascript
• jquery
• html

• Any error in console? – Vinay Commented Nov 6, 2016 at 2:54

2 Answers 2

Slightly different in that way that i don't return imageData after calling fetch (no need for that)

Plus I don't use FileReader which is worse for 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)
})

NOTE This method works, but @Endless answer below is much better in that you don't have to use FileReader.

For those looking for this same answer later I solved it with the following solution:

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

And now to add the image into the HTML DOM:

this.imageService.getSkillImage(this.skill).then((imageData) => {
        this.imageLoaded = true;
        let reader = new FileReader();
        reader.onload = (event) => {
            let base64String = event.target.result;
            $('#' + this.skill + '> img').attr('src', base64String);
        };
        reader.readAsDataURL(imageData);
    });