WHAT ?
When I was working on my current Angular + Spring Boot project, I just came across a requirement, which is to show an image on front end that was kept at server side.
Yes, the image file is kept at server side (eg: src/main/resources/images), To retrieve the image from server, a REST API is written, and the file is being read and converted to byte array. Then, the converted byte array is encoded using Base64 encoder and returned to client.
At client side, the encoded image is received and given to <img /> tag.
Okay, time to dive into the code. If you don’t know how to set up an Angular + Spring Boot project, please read it here first.
HOW ?
Let’s check what is being written in the Angular component and service classes, HTML file, and Spring Boot controller and service classes.
1) logo.service.ts
import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; @Injectable({ providedIn: "root" }) export class LogoService { constructor(private http: HttpClient) { } getLogo(): any { this.http.get('http://localhost:4200/logo/getLogo', { responseType: 'text' }).subscribe(response =&amp;amp;gt; { const imageSrc: any = 'data:image/png;base64,' + response; return imageSrc; }); } }
2) logo.component.ts
import { LogoService } from "src/app/services/logo.service"; @Component({ selector: "logo", templateUrl: "./logo.component.html", styleUrls: ["./logo.component.css"] }) export class LogoComponent { logo: any; constructor(private service: LogoService) { } getLogo(): void { this.logo = this.service.getLogo(); } }
3) logo.component.html
<div class="app-logo"><img src="{{ logo }}" alt="App Logo"></div>
That’s all about client side. Let’s go to server side. The Spring Boot application namely “myApp”, is supposed to run on port 8081.
4) LogoController.java
import java.io.IOException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import com.myApp.service.LogoService; @RestController @RequestMapping("/logo") public class LogoController { @Autowired LogoService logoService; @RequestMapping(method = RequestMethod.GET, value = "/getLogo", produces = "image/png") public String getLogo() { try { return logoService.getLogo(); } catch (IOException exception) { System.out.println(exception); } return null; } }
The service implementation is given below.
5) LogoServiceImpl.java
import java.io.File; import java.io.IOException; import java.util.Base64; import org.apache.commons.io.FileUtils; import org.springframework.stereotype.Service; @Service public class LogoService { public String getLogo() throws IOException { byte[] fileContent = FileUtils.readFileToByteArray(new File("/src/main/resources/images/appLogo.png")); return Base64.getEncoder().encodeToString(fileContent); } }
Thank You !
<div class="app-logo">
<img src="{{ logo }}" alt="App Logo">
</div>