unable to load image file from server in angular

Question

i am sending an image file named figure.png from flask api and it is working fine. i have checked it in postman. now here is the angular code -> chart-component.ts->

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-bar-chart2',
  templateUrl: './bar-chart2.component.html',
  styleUrls: ['./bar-chart2.component.css']
})
export class BarChart2Component implements OnInit {

  imgsrc!: Observable<any>;

  uploadApiUrl = "http://127.0.0.1:5000/graph"

  getimage(){
    this.imgsrc = this.http.get(this.uploadApiUrl)
    console.log("imgsrc: " + this.imgsrc)
  }

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.getimage()
  }

}

the html code->

<p>Min-Max analysis</p>

<img src={{imgsrc}} alt="no image" id="barChart2" style="position: relative; height:60vh; width:120vw">

the image does not load.

console window->

imgsrc: [object Object]
GET http://localhost:4200/[object%20Object] 404 (Not Found)

can someone help with whats going on?

mordor619 · Accepted Answer · 2021-12-26 14:30:42Z

2

this.http.get returns an Observable and img tag expects a string as src.

You need to accept the Blob from the API, create a URL from that blob, and then pass it as src to your img tag. Something like :

  imgsrc!: string | ArrayBuffer | null;
  sub!: Subscription;

  uploadApiUrl = "http://127.0.0.1:5000/graph"

  constructor(private http: HttpClient) { }

  getimage(){
    this.sub = this.http.get(this.uploadApiUrl, { 
      headers: { 'Content-Type': 'application/octet-stream'}, 
      responseType: 'blob'
    }).subscribe((src) => {
       // Get the blob
       const reader = new FileReader();
       reader.readAsDataURL(src); 
       reader.onloadend = () => {
       // result includes identifier 'data:image/png;base64,' plus the base64 data
          this.imgsrc = reader.result;     
      }

    });

  }

  ngOnInit(): void {
    this.getimage()
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

HTML:

<p>Min-Max analysis</p>
<ng-container *ngIf="imgsrc">
   <img src={{imgsrc}} alt="no image" id="barChart2" style="position: relative; height:60vh; width:120vw">
</ng-container>

edited Dec 26, 2021 at 14:30

mordor619

1902 silver badges17 bronze badges

answered Dec 26, 2021 at 11:55

Kanishk Anand

1,7121 gold badge9 silver badges17 bronze badges

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

10 Comments

mordor619 Over a year ago

no the thing is i donot send path. i send an image file of type png.

mordor619 Over a year ago

still not working

Kanishk Anand Over a year ago

Check now. @mordor619 Also it'll be great if you can put it directly in the question and give a clear expectation of the API response. Its uncommon to send a complete image as API response.

mordor619 Over a year ago

got an error. Property 'imgsrc' does not exist on type 'FileReader'.

Kanishk Anand Over a year ago

@mordor619 can you check now?

|

Collectives™ on Stack Overflow

unable to load image file from server in angular

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest