Angular: Display image from blob

Question

having trouble getting my image to show.. Any idea what i am doing wrong?

 <img style="width:175px" [src]="imageToShow">


getImage(){
  this.mccProgramService.getImageFromService().subscribe(
    (res) => {
      console.log(res);
      this.imageToShow = res;
    //  window.open(fileURL);
    }
  );
}

getImageFromService() {
        return this._httpClient.get("http://localhost:9080/mccr/api/file/download.action?contentFileId=11", {observe: 'response', responseType: 'blob'})
          .map((res) => {
            return new Blob([res.body], {type: res.headers.get('Content-Type')});
          })
      }

Data is coming back as this from service

<<other headers>>
<<Content-Type header>>
<<other headers>>
<<file binary data>>

Deepa · Accepted Answer · 2019-06-04 09:34:17Z

1

If you have blob image value, you can directly set the value in image tag..

<img  src="data:image/png;base64,{{blobData}}"/>

I have tried it in angular7, its working..

answered Jun 4, 2019 at 9:34

Deepa

9801 gold badge10 silver badges11 bronze badges

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

Comments

Pace · Accepted Answer · 2018-01-26 02:23:40Z

0

You need to create an object URL for the blob:

this.imageToShow = URL.createObjectURL(res);

UPDATE

Also, if you set the responseType to blob then you will get back a blob so you can remove the map statement entirely in getImageFromService

edited Jan 26, 2018 at 2:23

answered Jan 25, 2018 at 23:46

Pace

44.5k14 gold badges128 silver badges164 bronze badges

2 Comments

Pace Over a year ago

Added another suggestion

Anton Duzenko Over a year ago

WARNING: sanitizing unsafe URL value blob:localhost:4200/d43b3a76-cbc0-45f5-97a2-48a9ef50751f (see g.co/ng/security#xss)

Khan · Accepted Answer · 2024-03-06 07:11:54Z

0

Your .ts file -

YourMethod().subscribe((blob : any) => { this.blobdata = blob.fileContents; }

Your .html file -

< img  src="data:image/png;base64,{{blobData}}"/>

Your c# endpoint should return Ok(File(model.Byte, "image/jpeg"));

I hope it helps. And thank you, Deepa, your suggestion worked for me.

edited Mar 6, 2024 at 7:11

user14758149

answered Mar 1, 2024 at 2:24

Khan

12 bronze badges

Collectives™ on Stack Overflow

Angular: Display image from blob

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related