Angular 6 + Bootstrap 4 + SpringBoot RestAPI – Display Image from FileSystem Example

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

Related posts:
Bootstrap Image with SpringBoot RestAPI
SpringBoot Upload/Download Files Example – MultipartFile + Thymeleaf + Bootstrap 4

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

Goal

We create 2 projects:

– SpringBoot project -> Expose RestAPI to serve Image data from file system

Angular-6-Display-Images-From-SpringBoot-RestAPIs + SpringBoot project

– Angular 6 project -> Display image from RestAPI

Angular-6-Display-Images-From-SpringBoot-RestAPIs + Angular project

-> Result:

Angular-6-Display-Images-From-SpringBoot-RestAPIs

Practice

Angular 6 Client
Setup Angular project

We create Angular6DisplayImage project:

Angular-6-Display-Images-From-SpringBoot-RestAPIs + create-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:

Expose Image RestAPI

RestWebController ->

Add an image grokonez.png at \src\main\resources\image\grokonez-logo.png.

Run & Check Results

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

-> Result:

Angular-6-Display-Images-From-SpringBoot-RestAPIs

Sourcecode

SpringBootImageAPI
Angular-6-Display-Image

By grokonez | August 10, 2018.



Related Posts


Got Something To Say:

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

*