How to store, access and retrieve Image files from Nodejs-Express ( MongoDB ) to Angular8 FrontEnd, - node.js

Question

This is an Employee Management System, Profile images of Employees are uploaded and stored in API server (defined path).
I implemented the following steps.
Step 1: API server Request - the sample API code
router.get('/public/users-images/*', function(req, res) {
var filepath = __dirname +'/..'+req.url
fs.exists(filepath, (exists) => {
if (exists) {
var filepath = filepath
} else {
var filepath = __dirname +'/../public/users-images/user-image.png'
}
})
var fileext = filepath.split('.')
fs.readFile(filepath, function(err, buffer){
// console.log(base64Image);
var base64Image = new Buffer(buffer, 'binary').toString('base64');
res.send({img:'data:image/'+fileext[fileext.length -1]+';base64,' + base64Image});
});
})
Step 2: Front end request from Angular8 using the pipe method,
import { Pipe, PipeTransform } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Pipe({
name: 'userImages'
})
export class UserImagesPipe implements PipeTransform {
constructor(
private http: HttpClient,
private authenticationService: AuthenticationService
) { }
transform(img_name: string): any {
this.http.get('/public/users-images/'+img_name).subscribe(result => {
// You could also cache your result
return result.img;
});
}
}
Now, My question is , How to access the images from API Server location and display it in the UI screen. I assume to use the below method.
Html template <img [src]="'user-image.png' | userImages" class="responsive-12">
I use PIPE method - Because the User List (User Information including the Profile images ) will be used in Search filter, Task Creation form etc., So I tried to implement it in common, And maybe In the future, there is a chance to implement it through CDN.
Am I doing it in the right way? Or will there be any vents for issues ?

Answer 1

You are overcomplicating it. Let the browser do the fetching of the image.
Simply output the correct path to the image in the view
<img [src]="'/public/users-images/' + username + '.png'" alt="" />
or if you want you could create a pipe for it, but only to output the correct path
import { Pipe, PipeTransform } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Pipe({
name: 'userImages'
})
export class UserImagesPipe implements PipeTransform {
constructor(
private authenticationService: AuthenticationService
) { }
transform(img_name: string): any {
return `/public/users-images/${img_name}.png`
}
}
<img [src]="username | userImages" alt="" />