Отображение изображений в угловом приложении с сервера узлов

Question

У меня есть приложение nodejs, работающее на localhost: 3000, я загрузил изображения, используя multer, поэтому они находятся в папке ./uploads/. В приложении Angular, запущенном на locahost: 4200, я хочу получить эти изображения.

в моем цикле for: (projectImages - массив изображений для каждого объекта Project)

<div *ngFor="let i of project.projectImages">
   <img [src]=i.path alt="" > 
</div>

проблема в том, что путь отображается как: localhost: 4200 / uploads / image.png вместо localhost: 3000 / uploads / image.png

UPDATE: Исправив это, добавив переменную в компонент, теперь я получаю:

WARNING: sanitizing unsafe URL value 

любая помощь будет оценена!

UPDATE2 : это мой компонент:

    import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../services/project.service';
import { Router, ActivatedRoute } from '@angular/router';
import {Location} from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'app-project-details',
  templateUrl: './project-details.component.html',
  styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {
  project:any;
  apiUrl :string = "localhost:3000";
  project_id:string;

  constructor(
    private router:Router,
    private activatedRoute: ActivatedRoute,
    private projectService:ProjectService,
    private _location: Location,
    private sanitization: DomSanitizer
  ) {
    this.activatedRoute.params
    .subscribe( params => {
      console.log(params.project_id)
      this.project_id = params.project_id;
      this.getProjectByID(params.project_id);
    })
   }

  ngOnInit() {
  }

getProjectByID(project_id:string){
  this.projectService.getProjectById(project_id).subscribe((data:any) => {
    this.project = data.project;
    this.project.projectImages.map(image => {
      image.path = this.sanitization.bypassSecurityTrustUrl(`${this.apiUrl}/${image.path}`.replace(/\\/g,"/"));
      console.log(image);
      return image;
});
    console.log(this.project.projectImages); 
  } , err => {
    console.log(err);
  });
}
}

ПРИМЕЧАНИЕ: project.projectImages - это массив, содержащий изображения, вот как это выглядит: https://ibb.co/jEgszo

Answer 1

использовать полный путь и очистить URL перед использованием

import { DomSanitizer } from '@angular/platform-browser';
import { environment } from '../../../../environments/environment';

export class YourClass{
  project;
  apiUrl;

  constructor(private sanitization: DomSanitizer) {
      this.apiUrl = environment.apiUrl;
      project.projectImages.map(image => {
        image.path = this.sanitization.bypassSecurityTrustUrl(`${this.apiUrl}/${image.path}`);
        return image;
  });
  }
}

тогда в своем html вы можете сделать это

<div *ngFor="let i of project.projectImages">
   <img [src]=i.path alt="" > 
</div>

ваш полный код будет выглядеть примерно так

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../services/project.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { environment } from '../../../../environments/environment';

@Component({
    selector: 'app-project-details',
    templateUrl: './project-details.component.html',
    styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {
    project: any;
    apiUrl: string;
    project_id: string;
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private projectService: ProjectService,
    private _location: Location,
    private sanitization: DomSanitizer
) {
    this.apiUrl = environment.apiUrl;

    this.activatedRoute.params
        .subscribe(params => {
            console.log(params.project_id)
            this.project_id = params.project_id;
            this.getProjectByID(params.project_id);
        })
}

ngOnInit() {
}

getProjectByID(project_id: string) {
    this.projectService.getProjectById(project_id).subscribe((data: any) => {

        data.project.projectImages.map(image => {
            image.path = this.sanitization.bypassSecurityTrustUrl(`${this.apiUrl}/${image.path}`);
            return image;
        });
        this.project = data.project;
    }, err => {
        console.log(err);
    });
}

}

посмотрите документы здесь