View blob response as image in angular

Question

I am trying to get a blob response from a request, and then generate a URL from that blob and set this URL as an image's source.

But the image is not loading.

This is my HTML:

<img src="{{previewSignsrc}}" alt="Sign Thumbnail">

And this is my .ts file:

this.signModalDataService.getPreviewSignature({'name': this.SignatureName, 'font_type': 0});
    this.signModalDataService.previewSignature
      .subscribe((res) => {
        console.log(res);
        let blob = new Blob([res['_body']], {type: 'image/png'});
        this.previewSignsrc = URL.createObjectURL(blob);
        this.showPreviewSign = true;
      });

I used same method to set url for ng2-pdfviewer and it worked fine.

An img is not going to show a pdf. See https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html — Ruan Mendes, Apr 09 '19 at 11:38
initially, you had a pdf, if you edit the question, you should at least mention that you put that in by accident initially — Ruan Mendes, Apr 09 '19 at 12:09

Hien Nguyen · Answer 1 · 2019-04-09T12:03:05.667

You can dislay image like this code

this.config.getData()
          .subscribe((blob : any) => {
            let objectURL = URL.createObjectURL(blob);       
            this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);

          });

If your data is base64 display like this

 this.config.getData()
      .subscribe((baseImage : any) => {
        let objectURL = 'data:image/jpeg;base64,' + baseImage.image;
         this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);

      });

Demo https://stackblitz.com/edit/display-image-from-api

score 4 · Answer 2 · answered Apr 12 '21 at 13:27

As was metioned earlier by Memo 313 MediaSA, FileReader works.

 const reader = new FileReader();
 reader.readAsDataURL(data); //FileStream response from .NET core backend
 reader.onload = _event => {
     url = reader.result; //url declared earlier
     image.nativeElement.src = url; //image declared earlier
 };

score 3 · Answer 3 · answered May 07 '20 at 20:06

You can use new FileReader(); I tried so much codes and that's the only one that worked for me.

  var reader = new FileReader ();
 reader.readAsDataURL(response) <= from inner . subscribe
  reader.onload = (_event) => {
  this.retrieveURL = reader.result;
 }

 .html
 [src]="retrieve URL"

Bear with me I typed from my cellphone

That's all no need to use sanitizers, hope it helps somebody out there, ooh I am using Angular8

score 2 · Answer 4 · answered Oct 10 '22 at 19:12

this code is the best for blob(for example asp file stream in backend) and 100% work.

.ts:

 image: any;
  constructor( 
    private sanitizer: DomSanitizer,
    ) { }
 this.signModalDataService.previewSignature
    .subscribe(blob => {
        let objectURL = URL.createObjectURL(blob);
        this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
      })

.html

<img [src]="image">

score 1 · Answer 5 · answered May 14 '21 at 09:13

1

If you use JsonConvert from a .Net API to return an object in which one of the fields is the image byte[] it will convert it to a base64 string. Then you don't need anything special when calling the api or displaying the image.

answered May 14 '21 at 09:13

user2866001

59
4

score 1 · Answer 6 · answered Dec 14 '22 at 10:40

This works for me:

this.httpClient.get(Endpoints.PRODUCTS + '/pictures/download', {'params': queryParams, responseType: 'blob'})
  .subscribe(
    value => {
      // Add Preview
      const reader = new FileReader();
      reader.readAsBinaryString(value);
      const addPreview = (fileBase64) => {
        this.urls.push(`data:${value.type};base64,${btoa(fileBase64)}`);
      };
      reader.onload = function (e) {
        addPreview(e.target.result);
      };
    },
    (error) => {
      // Refactor
      // this.errorList = error.error.data.errorList;
      console.log(error);
    })
;

View blob response as image in angular

6 Answers6

Linked