Displaying images on angular app from node server - node.js

Question

I have a nodejs app running on localhost:3000, I uploaded images using multer, so they are in ./uploads/ folder.
In the Angular app running on locahost:4200 I want to retrieve those images.
in my for loop: ( projectImages is the array of images for every Project Object)
<div *ngFor="let i of project.projectImages">
<img [src]=i.path alt="" >
</div>
the problem is that the path is being displayed as : localhost:4200/uploads/image.png instead of localhost:3000/uploads/image.png
UPDATE:
With that fixed by adding a variable to the component, I'm now getting :
WARNING: sanitizing unsafe URL value
any help would be appreciated!
UPDATE2:
this is my component:
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);
});
}
}
NOTE: project.projectImages is an array containing the images, this is what it looks like: https://ibb.co/jEgszo

Answer 1

use full path and sanitize the url before use
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;
});
}
}
then in your html you can do this
<div *ngFor="let i of project.projectImages">
<img [src]=i.path alt="" >
</div>
your complete code will look something like this
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);
});
}
}
check out the docs here

Answer 2

I guess you are using express in your node app, you need to include a static route to the resources/uploads directory (express static routes) like the following:
app.use(express.static('resources/uploads'))