Getting image url from backend,how to show image in html in angular-CodePudding

findvehicleDocumentsImage(owner: string, registrationNumber: string, fileType: string): Observable { debugger; return this.http.get(AppConstant.FIND_VEHICLE_DOCUMENT_API '/' owner '/' registrationNumber '/' fileType);

}

CodePudding user response：

First of all welcome to StackOverflow community!

To retrieve an image and display it you should create a service:

Image service

  findvehicleDocumentsImage(owner: string, registrationNumber: string, fileType: string): Observable { 
  // debugger; 
  return this.http.get(`${AppConstant.FIND_VEHICLE_DOCUMENT_API} /${owner}/${registrationNumber}/${fileType},
  {
    header: {
      authentication: `Bearer ${yourToken}`
    }
  }
  );
}

Component A - TS

Then in your component, you have to call the method and render the new image.

  public image: string;

  constructor(
    private readonly domSanitizer: DomSanitizer,
    private readonly service: YourService
  ) {}
  ngOnInit() {
    this.service.findvehicleDocumentsImage(owner, registrationNumber, fileType)
    .subscribe(image => {
      // I suppose you retrieve an URL, but it depends from your data
      this.image = this.this.domSanitizer.bypassSecurityTrustUrl(image);    
     });
  }

Component A - HTML

<img [src]="image" />

In this way, you are retrieving, sanitizing the image, and displaying it.

Bonus tip:

You should implement an interceptor for adding the token to each of your HTTP requests. You can get more information here: Angular Interceptor

CodePudding user response：

get img url in ts file:

imageUrl:string;

show in html:

<img src={{imageUrl}} alt=""/>