node.js - 从 Node 服务器在 Angular 应用程序上显示图像

Question

我有一个在 localhost:3000 上运行的 Nodejs 应用程序，我使用 multer 上传了图像，因此它们位于 ./uploads/文件夹中。在 locahost:4200 上运行的 Angular 应用程序中，我想检索这些图像。

在我的 for 循环中:(projectImages 是每个项目对象的图像数组)

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

问题是路径显示为: localhost:4200/uploads/image.png 而不是 localhost:3000/uploads/image.png

更新:通过向组件添加变量来解决这个问题，我现在得到:

WARNING: sanitizing unsafe URL value 

任何帮助将不胜感激!

更新2:这是我的组件:

    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

使用完整路径并在使用前清理网址

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

}

查看文档 here