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

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

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

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

Technologies

  • Angular 10
  • 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 10 project -> Display image from RestAPI

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

-> Result:

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

Practice

Angular 10 Client

Setup Angular project

We create Angular6DisplayImage project:

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

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

Sourcecode

SpringBootImageAPI
Angular-6-Display-Image



By grokonez | March 26, 2021.


Related Posts


Got Something To Say:

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

*