1

I need to display an image in Angular 7 from an API. I can retrieve the image either as form-data or by path of the image. So how do I display it in Angular?

I already tried to display an image using its file path but had no success. The code I tried is given below.

TS FILE

this.httpClient.get(`${this.url}`,this.httpOptions)
  .subscribe(data => {
    this.image=data['filePath'];
    this.finalImage = this.sanitizer.bypassSecurityTrustUrl(this.image);
  },
  error => {
    console.log(error);
  }
);

HTML

<div> <img src="{{finalImage}}"> </div>
<div> <img [src]="finalImage"> </div>
<div> <img bind-src="finalImage"> </div>
Dino
  • 7,779
  • 12
  • 46
  • 85
Louis Prince
  • 11
  • 2
  • what error you are seeing in console? – Sadid Khan Sep 25 '19 at 07:32
  • So what's the problem when you get image url from api and use ``? – jitender Sep 25 '19 at 07:32
  • when I console this.finalImage the response is "changingThisBreaksApplicationSecurity: "C:/Users/SERVER/Desktop/Storage/upload/13-08-2019/18_Screenshot (5).png"" – Louis Prince Sep 25 '19 at 07:35
  • no image is displayed, like those icon of broken image is shown – Louis Prince Sep 25 '19 at 07:37
  • Also there displays a warning: "WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: C:/Users/SERVER/Desktop/Storage/upload/13-08-2019/18_Screenshot (5).png (see http://g.co/ng/security#xss) (see http://g.co/ng/security#xss)" – Louis Prince Sep 25 '19 at 07:38
  • have a look on this https://stackoverflow.com/questions/41995986/changingthisbreaksapplicationsecurity-angular2 – Sadid Khan Sep 25 '19 at 07:41

0 Answers0