Why my logo isn't displaying nodejs app - node.js

Question

Here is a picture of my project directory.
I have my logo in the template/assets/logo.png.
In my server.ts file, I use middleware express as app.use( express.static( "template" ) );
unfortunately, When I try to display the logo in my html file, it doesn't display.
<img src="assets/logo.png" alt="Logo">
Here is my server.ts file:
// Import everything from express and assign it to the express variable
import express from 'express';
import fs from 'fs';
// Import WelcomeController from controllers entry point
import {WelcomeController} from './app/controllers';
// Create a new express application instance
const app: express.Application = express();
// The port the express app will listen on
const port: any = process.env.PORT || 3000;
// Template folder
app.use( express.static( "template" ) );
// Mount the WelcomeController at the /welcome route
app.use('/', WelcomeController);
// Serve the application at the given port
app.listen(port, () => {
const source = fs.createReadStream('/src/app');
const dest = fs.createWriteStream('/dist');
source.pipe(dest);
source.on('end', function() { /* copied */ });
source.on('error', function(err) { /* error */ });
// Success callback
console.log(`Listening at http://localhost:${port}/`);
});
What would be the way to display my templates with the files showing?

Answer 1

I was doing this wrong app.use( express.static( "template" ) );
I should be doing app.use(express.static(__dirname + '/app/template'));

Answer 2

i think you need to define what the root directory is first in express before importing assets (at least, it helps!)
so if you import express and then assign express() to a variable ,e.g.
var express = require express();
var app = express;
then you could do something like:
var root = require('path').join(__dirname,'/template');
app.use(express.static(root));
Once the root is defined, all further files will be called from that place when a url is referenced.
hope this helps