Angular 2 : display binary image served with express js

Question

I have an image in the server and I want to send it to the client : here is my server side code :

var options = {
    root: './Images/',
    dotfiles: 'deny',
    headers: {
        'x-timestamp': Date.now(),
        'x-sent': true
    }
};
var fileName = "a.png";
BillModel.getBillsModel((err, config_model) => {
    if (err) {
        console.log("error from database " + err)
        //res.json({ code: 0, error: err, response: null })
    } else {
        res.sendFile(fileName, options, function (err) {
            if (err) {
                console.log(err);
            } else {
                console.log('Sent:', fileName);
            }
        });
   }

and here my code in the client side :

    this.billsService.getAllModel().subscribe(
      (data) => {
        console.log(data.text());
        this.image = data.text();
      },  
      (err) => console.log(err),
      () => console.log("Done")
    );

html code :

<img  src="'data:image/jpeg;base64,'+image"/>

So image binary data is successfully displayed in the console but i can't add it to the html page

solution : thanks to Lyubimov Roman , I have solved my issue using blob object and here is my code :

sertvice ts :

public getImage() {
    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({
      headers, responseType: ResponseContentType.Blob,
    });
    return this.http.get('http://localhost:3000/BillsModel/all', options)
      .map((res: Response) => { return (res); })
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

app component ts

this.billsService.getAllModel().subscribe(
      (data) => {
        console.log(data._body);
        var blob = new Blob([data.blob()], { type: "image/png" });
        var reader = new FileReader();

        reader.onload = (event) => {
          this.URL = reader.result;
        }
        reader.readAsDataURL(blob);
      },  //changed
      (err) => console.log(err),
      () => console.log("Done")
    );

html code :

 <img *ngIf="URL" [src]="URL" /> //you need to use *ngIf="URL" , otherwise some browser error could appear

and the same back end code

I guess you should set responseType to blob and then fetch data by reader. Look here to make blob and here to recieve an image base64 content. — Lyubimov Roman
– Lyubimov Roman, Commented Aug 13, 2017 at 17:07
thanks @LyubimovRoman , it's done with blob , I wish you have post it as answer and not comment — nadhem
– nadhem, Commented Aug 13, 2017 at 18:28

Lyubimov Roman · Accepted Answer · 2017-08-14 01:23:32Z

2

You need to set responseType to blob and then fetch data by reader. Look here to make blob and here to recieve an image base64 content.

answered Aug 14, 2017 at 1:23

Lyubimov Roman

1,2691 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ganders Over a year ago

Please include the actual code instead of just links...in case the links become dead in the future

PerfectPixel · Accepted Answer · 2017-08-13 17:46:20Z

0

If you want to bind a base64 encoded image that you received from the server via angular bindings to the DOM. You need to trust the URL first, otherwise the DomSanitizer will remove it (see the docs).

url = sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + image)

Then you can use that url and bind it: <img [src]="url">.

answered Aug 13, 2017 at 17:46

PerfectPixel

1,9881 gold badge17 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular 2 : display binary image served with express js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related