title: How to store, access and retrieve Image files from Nodejs-Express ( MongoDB ) to Angular8 FrontEnd,
body: <p>This is an Employee Management System, Profile images of Employees are uploaded and stored in API server (defined path).</p>
  
  <p>I implemented the following steps. </p>
  
  <p><a href="https://i.stack.imgur.com/JBgb0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JBgb0.png" alt="enter image description here"></a></p>
  
  <p><strong>Step 1: API server Request - the sample API code</strong> </p>
  
  <pre><code>router.get('/public/users-images/*', function(req, res) {
  var filepath = __dirname +'/..'+req.url
  fs.exists(filepath, (exists) =&gt; {
    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});
   });
  })
  </code></pre>
  
  <p><strong>Step 2: Front end request from Angular8 using the pipe method,</strong> </p>
  
  <pre><code>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 =&gt; {
       // You could also cache your result
       return result.img;
  
     });
    }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>Html template <code>&lt;img [src]="'user-image.png' | userImages" class="responsive-12"&gt;</code></p>
  
  <p>I use <strong>PIPE method</strong> - 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.</p>
  
  <p>Am I doing it in the right way? Or will there be any vents for issues ?</p>