Send an image from the Java backend to Angular using REST services
source link: https://marco.dev/2017/02/11/send-and-image-from-the-java-backend-to-angular-using-rest-services/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
java-version.com: What's new in Java 16? 15? Keep up to date!
Send an image from the Java backend to Angular using REST services
Problem: we want to show in our Angular 2 application images that should not be directly accessible by the browser. The images are provided by our Java backend.
Solution:
We can load the image in the backend and send the content to the client.
Backend:
public @ResponseBody Map<String, String> getImage(@PathVariable String id) throws IOException {
File file = new ClassPathResource(imagesPath + imageName).getFile();
String encodeImage = Base64.getEncoder().withoutPadding().encodeToString(Files.readAllBytes(file.toPath()));
Map<String, String> jsonMap = new HashMap<>();
jsonMap.put("content", encodeImage);
return jsonMap;
}
We have to read the bytes of the image and encode the string in Base 64
String encodeImage = Base64.getEncoder().withoutPadding().encodeToString(Files.readAllBytes(file.toPath()));
Because we are working with REST services and JSON we have to transfer the content in a JSON format {'name': 'content'} we add the result in a Map structure:
Map<String, String> jsonMap = new HashMap<>();
jsonMap.put("content", encodeImage);
On the client side we can call the REST Service as usual, we get the JSON object in our custom JsonString object:
getImage() : Observable<JsonString> {
return this.http.get(this.serviceUrl)
.map((response : Response) => {
return response.json();
})}
The controller is more challenging:
We need to import the sanitizer
import {__platform_browser_private__, DomSanitizer} from '@angular/platform-browser';
Sanitize the content received from the service adding the type of format received and assign it to the variable image:
private sanitizer: DomSanitizer;
private image : any;
private readonly imageType : string = 'data:image/PNG;base64,';
getImage(){
this.imageService.getImage()
.subscribe((data :JsonString ) => {
this.image = this.sanitizer.bypassSecurityTrustUrl(this.imageType + data.content);
})}
In the template we can simply call the image content:
<img [src]='image'>
Here the result with the JSON content from the server:
Author
Marco Molteni
Marco Molteni Blog
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK