Как хранить, получать доступ и получать файлы изображений из Nodejs - Express (MongoDB) в Angular8 FrontEnd,

Question

Это система управления сотрудниками, изображения профиля сотрудников загружаются и хранятся на сервере API (определенный путь).

Я реализовал следующие шаги.

Шаг 1: Запрос к серверу API - пример кода API

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});
 });
})

Шаг 2: Внешний запрос от Angular8 с использованием метода pipe,

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;

   });
  }
}

Теперь мой вопрос: как получить доступ к изображениям из местоположения API-сервера и отобразить их на экране пользовательского интерфейса. Я предполагаю использовать метод ниже.

Html template <img [src]="'user-image.png' | userImages" class="responsive-12">

Я использую PIPE method - потому что список пользователей (информация о пользователе, включая изображения профиля) будет использоваться в фильтре поиска, задача Форма создания et c., Поэтому я попытался реализовать это совместно, и, возможно, в будущем есть шанс реализовать это через CDN.

Правильно ли я это делаю? Или будут какие-либо отверстия для проблем?

Answer 1

Вы слишком усложняете это. Пусть браузер выполняет выборку изображения.

Просто выведите правильный путь к изображению в представлении

<img [src]="'/public/users-images/' + username + '.png'" alt="" />

или, если хотите, вы можете создать канал для него, но только вывести правильный путь

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="" />