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


  • 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


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


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


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:

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

Angular Display Images

Grokonez-About Image Grokonez-About Image

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:



Configure Amazon S3 Client ->

package com.ozenero.displayimage.s3;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.regions.Regions;
public class S3Config {
	private String awsId;
	private String awsKey;
	private String region;

	public AmazonS3 s3client() {
		BasicAWSCredentials awsCreds = new BasicAWSCredentials(awsId, awsKey);
		AmazonS3 s3Client = AmazonS3ClientBuilder.standard()
		                        .withCredentials(new AWSStaticCredentialsProvider(awsCreds))
		return s3Client;

Add Amazon S3 configuration in file:
Implement Download Image from S3

Create interface ->

package com.ozenero.displayimage.service;


public interface S3Services {
	public ByteArrayOutputStream downloadFile(String keyName);

Implement ->

package com.ozenero.displayimage.service.impl;


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import com.amazonaws.AmazonClientException;
import com.amazonaws.AmazonServiceException;
import com.ozenero.displayimage.service.S3Services;
public class S3ServicesImpl implements S3Services {
	private Logger logger = LoggerFactory.getLogger(S3ServicesImpl.class);
	private AmazonS3 s3client;
	private String bucketName;
	public ByteArrayOutputStream downloadFile(String keyName) {
		try {
            S3Object s3object = s3client.getObject(new GetObjectRequest(bucketName, keyName));
            InputStream is = s3object.getObjectContent();
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            int len;
            byte[] buffer = new byte[4096];
            while ((len =, 0, buffer.length)) != -1) {
                baos.write(buffer, 0, len);
            return baos;
		} catch (IOException ioe) {
			logger.error("IOException: " + ioe.getMessage());
        } catch (AmazonServiceException ase) {"sCaught an AmazonServiceException from GET requests, rejected reasons:");"Error Message:    " + ase.getMessage());"HTTP Status Code: " + ase.getStatusCode());"AWS Error Code:   " + ase.getErrorCode());"Error Type:       " + ase.getErrorType());"Request ID:       " + ase.getRequestId());
			throw ase;
        } catch (AmazonClientException ace) {"Caught an AmazonClientException: ");
  "Error Message: " + ace.getMessage());
            throw ace;
		return null;

Expose Image RestAPI

DownloadFileController ->

package com.ozenero.displayimage.controller;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.ozenero.displayimage.service.S3Services;

public class DownloadFileController {
	S3Services s3Services;
     * Download Files
	public ResponseEntity downloadFile() {
		String keyname = "ozenero-logo.png";
		ByteArrayOutputStream downloadInputStream = s3Services.downloadFile(keyname);
		return ResponseEntity.ok()
					.header(HttpHeaders.CONTENT_DISPOSITION,"attachment; filename=\"" + keyname + "\"")
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



Note: In SpringBootImageRestAPI project, open file, then change & to yours.

Leave a Reply

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