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
Contents
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 project -> Display image from RestAPI
-> Result:
Practice
Angular 6 Client
Setup Angular project
We create Angular6DisplayImage project:
Then install Bootstrap by commandline:
>npm install bootstrap jquery --save |
Configure installed Bootstrap & JQuery in angular.json file:
... "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] ... |
Display Image Component
We create a display-image component by commandline ng generate component DisplayImage.
Implement style display-image.component.html:
<div class="container"> <h3>Angular Display Images</h3> <hr/> <div id="loadImageBootstrapStyleDiv" style="background-color:black; width: 520px; padding: 10px"> <img src="http://localhost:8080/api/image/logo" class="rounded" alt="Grokonez-About Image" width="250px" height="auto"> <img src="http://localhost:8080/api/image/logo" class="rounded-circle" alt="Grokonez-About Image" width="250px" height="auto"> </div> </div> |
Implement class display-image.component.ts:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-display-image', templateUrl: './display-image.component.html' }) export class DisplayImageComponent implements OnInit { constructor() { } ngOnInit() { } } |
Add app-display-image seletor to app.component.html:
<app-display-image></app-display-image> |
SpringBoot Server
Create SpringBoot project
We use SpringToolSuite to create a SpringBoot project with dependency:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> |
Expose Image RestAPI
RestWebController ->
package com.javasampleapproach.bootstrapimage.controller; import java.io.IOException; import org.springframework.core.io.ClassPathResource; import org.springframework.core.io.InputStreamResource; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @CrossOrigin(origins = "http://localhost:4200") @RestController public class RestWebController { @GetMapping(value = "/api/image/logo") public ResponseEntity<InputStreamResource> getImage() throws IOException { ClassPathResource imgFile = new ClassPathResource("image/grokonez-logo.png"); return ResponseEntity .ok() .contentType(MediaType.IMAGE_PNG) .body(new InputStreamResource(imgFile.getInputStream())); } } |
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:
in which directory spring fetches the image because I’m getting the following error:cannot be opened because it does not exist.
my code: