Angular 6 – Display Image from Amazon S3 with SpringBoot RestAPI + Bootstrap 4 Example

In the tutorial, we show how to display images from Amazon S3 with Angular 6, Bootstrap 4 and SpringBoot RestAPI.

Related posts:
Amazon S3 – Upload/Download files with SpringBoot Amazon S3 application
Amazon S3 – Upload/download large files to S3 with SpringBoot Amazon S3 MultipartFile application
Amazon S3 – SpringBoot RestAPIs Upload/Download File/Image to S3

Technologies

  • Angular 6
  • Bootstrap 4
  • Java 1.8
  • Spring Boot 2.0.4.RELEASE
  • Maven 3.3.9
  • Spring Tool Suite 3.9.0.RELEASE
  • Amazon S3

Goal

We create 2 projects:

– SpringBoot project -> Get Image from Amazon S3 then Exposing a RestAPI.

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + spring-boot-project-structure

– Angular 6 project -> Display image from RestAPI

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + angular-6-project

Result:

File on Amazon S3 ->

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + file-on-amazon-s3

Display Image ->

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + file-on-amazon-s3

Practice

Angular 6 Client
Setup Angular project

We create Angular6DisplayImage project:

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + install-angular-project

Then install Bootstrap by commandline:

Configure installed Bootstrap & JQuery in angular.json file:

Display Image Component

We create a display-image component by commandline ng generate component DisplayImage.

Implement style display-image.component.html:

Implement class display-image.component.ts ->

Add app-display-image seletor to app.component.html:

SpringBoot Server
Create SpringBoot project

We use SpringToolSuite to create a SpringBoot project with dependency:

Configure Amazon S3 Client

S3Config.java ->

Add Amazon S3 configuration in application.properties file:

Implement Download Image from S3

Create interface S3Services.java ->

Implement S3ServicesImpl.java ->

Expose Image RestAPI

DownloadFileController ->

Run & Check Results

– Build & Run SpringBoot project with commandlines {mvn clean install, mvn spring-boot:run}.
– Run the Angular project as commandline: ng serve

Upload File to Amazon S3 ->

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + file-on-amazon-s3

Display Image ->

Angular-6-Display-Image-Amazon-S3-Spring-Boot-Rest-API + results

SourceCode

Angular6DisplayImage
SpringBootImageRestAPI

Note: In SpringBootImageRestAPI project, open application.properties file, then change gkz.aws.access_key_id & gkz.aws.secret_access_key to yours.

By grokonez | August 10, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*