从节点服务器在角度应用程序上显示图像

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

使用完整路径并在使用前清理 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);
    });
}

}

查看文档here

Answer 2

我猜你在你的节点应用程序中使用 express，你需要包含一个到资源/上传目录的静态路由（快速静态路由），如下所示：

app.use(express.static('resources/uploads'))