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


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


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 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": [
"scripts": [

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>

<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">


Implement class display-image.component.ts:

import { Component, OnInit } from '@angular/core';

  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:


SpringBoot Server

Create SpringBoot project

We use SpringToolSuite to create a SpringBoot project with dependency:


Expose Image RestAPI

RestWebController ->

package com.javasampleapproach.bootstrapimage.controller;


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")
public class RestWebController {
    @GetMapping(value = "/api/image/logo")
    public ResponseEntity getImage() throws IOException {

        ClassPathResource imgFile = new ClassPathResource("image/grokonez-logo.png");

        return ResponseEntity
                .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:




By grokonez | March 26, 2021.

Related Posts

Got Something To Say:

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