I want to display the images stored in database. The database stores the path of the image. I want to retrieve the image using angular. How can i do that?

1 Answers

1
Hien Nguyen On

You need create a service to call API to get image URL ( i assume image stored in JSON file)

   @Injectable()
    export class ConfigService {

      constructor(private http: HttpClient) { }

      getData() {
        return this.http.get('/assets/config.json');
      }
    }

Create component ts file to call service and return image url

export class AppComponent {
  name = 'Test display image';
  thumbnail: any;
  constructor(private imageService: ConfigService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
     this.imageService.getData()
      .subscribe((baseImage : any) => {

        let objectURL = baseImage.image;

         this.thumbnail = objectURL;

      });
  }
}

Update HTML file to display image

<img width="100%" id="myimage" [src]='thumbnail' />

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