how can i retrieve images whose path is stored in database using angular?

Question

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?

You have to write api and select query from that table and return as json and call it using http module from angular — Paresh Gami
– Paresh Gami, Commented Apr 29, 2019 at 11:20

Hien Nguyen · Accepted Answer · 2019-04-29 11:27:03Z

1

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

answered Apr 29, 2019 at 11:27

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

2 Comments

Sasi Kumar M Over a year ago

Simple and Nice solution.

Hien Nguyen Over a year ago

In your image, the url is absolute path, you should use relative path like /image/abc.png

Collectives™ on Stack Overflow

how can i retrieve images whose path is stored in database using angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related