Display Blob Image from server


Hello, I am using Ionic 3 and working with a REST API that sends image as byte stream.

                   byte[] contents = IOUtils.toByteArray(new FileInputStream(file));
			    HttpHeaders headers = new HttpHeaders();
	            String filename = file.getName();
	            headers.setContentDispositionFormData(filename, filename);
	            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
	            return response;

With fiddler, the output ImageView is ok.

How do I convert the above to a base64 image data for display in my ionic app?

I have tried a few methods:

myWsService () :{ 
let obsRes: Observable<Response> = this.http.post(url, options);
return obsRes.map((res: Response) => { return res._body;}).catch(err => this.handleError(err, callMethod));

        result => {
          var blob = new Blob([result], {
            type: 'image/png'

          var reader = new FileReader();
          reader.onloadend = () => {
            this.base64data = reader.result;
        err => {
            // display error
<img style="width:200px;height:200px;" [src]="base64data" />

The base64data shows something like:


The converted data doesn’t look right and I think something must be wrong. I am doing my tests via the browser or phone.

Any ideas please?

EDIT 1 :
My response is correct, with fiddler i checked the binary content. But in ionic, my blob is corrupted. I don’t have good binaries datas. Some characters are replaced by ’ '� '. At left the original file, at right the file received by ionic.

I don’t understand why.



No, your link is to convert a base64 in blob. I have a blob, and i want a base64.


I convert the image to a base64 string on the server. I use nodejs with expressjs on server side.

app.get('/friendships/avatars/:avatar', authenticate, (req, res) => {
    let filePath = path.join(__dirname, '../private/images/avatars', req.params.avatar);
    try {
        let avatar = fs.readFileSync(filePath, 'base64');
        res.send({ avatar });
    } catch (err) {


On Ionic I use this to get the base64 image

 async getUserAvatarBase64(token: string): Promise<string> {
    try {
      let headers = new Headers({ 'Content-Type': 'application/json', 'x-auth': token });
      const response = await this.http.get(`${this.server}${this.profilesAvatarsRoute}/${this.userProfile.avatar}`, { headers: headers }).toPromise();
      return `data:image/jpg;base64,${response.json().avatar}`;
    } catch (err) {
      throw new Error();


To add data:image/jpg;base64, to the return value is important

In my case I save the return value in userprofile.avatar.

In the html page you can use it like this:

<img class="profile-view_image" [src]="userProfile?.avatar ? userProfile?.avatar : 'assets/img/avatar.png'" alt="">

So this is not an exact answer to your question, but perhaps a way to solve your problem.


Yes, it’s my actual solution. In base 64 (with JSON format), it’s ok. But a request for a same file is +30% bigger in base64…


Perhaps you have an idea :
I have stored images in a local pouchdb, and want to retrieve them…
my html
<img [innerHTML]="getimage('png.png')">

page function

      return res;

database function :

async getimagepouch(img){
		console.log('appel getimagepouch');
			let blob = await this.localdbimages.getAttachment(img, img);
		        let url = 'src='+ URL.createObjectURL(blob);
                        return url;
		} catch (err){

It seems like there is an infinite loop, (recursive ?), getimage gets called again and again…

I get these url in getimagepouch :


After some time, I get this error :

Lazy require of app.binding did not set the binding field

Any clue??