Display image source where image path stored in database - node.js

Question

I need to display related image in ngFor
Like
<div class="row" *ngFor="let name of cheaterNames">
<div class="col-4">
{{ name.name }}
<img src="{{name.path}}" class="rounded mx-auto d-block">
</div>
</div>
This is how the data look like in database
_id OgjectId("566666tyyhhhh")
name Laravel
path uploads\logo.png
This how my project folder looks like
Project
client
about
about.component.html // this the html i used to display images
about.component.ts
dist
e2e
node_modules
server //this is where express/nodejs
controllers
models
routes
app.ts
uploads // this is where the images is stored during file uploads
logo.png
other imgs...
Any ideas for this? The image does not show up and shows 404 error

Answer 1

Your paths will all be relative to the base content directory for your web server which is probably not your project's home directory. Basically, the uploads directory is not within your base content directory, so your image files will not be found by the server at runtime. You need to determine where your base content directory is (express server configuration) and ensure that your uploads directory is under that directory.
For example, if you're serving up a build from the dist directory, uploads should be under dist;