When I'm visiting another page, images, logos, and icons are not displayed, but when I'm went back to the home page, images are displayed perfectly

In this project, I have used the pug template engine and express.js

Below link is the image of the project folder and files

Project folder and files image

Below link is the image of the home page

images, logos, and icons are displayed perfectly, but on the login and signup page I'm facing a problem with images

Home page

Below link is the image of the login and singup page

On this page, images are not displayed Problem!

login and singup page

Below section is express.js code

const express = require("express");
const app = express();
const port = 80;
const path = require('path');

// <------------------ define static mode  ------------------>

*// app.use(express.static('public'));*

const staticpath = path.join(__dirname, '../public');
app.use(express.static(staticpath));

// <------------------ Adding pug engine in express  ------------------>
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, '../view'));

app.get('/', (req, res)=>{
    res.status(200).render('index.pug');
})

app.get('/loginandsingup.pug', (req, res)=>{
    res.status(200).render('loginandsingup.pug');
})

app.listen(port, ()=>{
     console.log(`application had started successfully on port ${port}`)
})

below section is pug code of home page

.img#menu-icon
  img(src="images/menu-icon.svg", alt="Menu icon")
#navbarSupportedContent.collapse.navbar-collapse
  .logo
    a(href="/")
      img(src="images/logo.png", alt="entre logo")
  ul.navUl.navbar-nav.mb-2.mb-lg-0
    li#nav-item-1.navList.nav-item
      a.navLink.nav-link.text-dark(href="#") Home
    li#nav-item-1.navList.nav-item
      a.navLink.nav-link.text-dark(href="#") Order

Below section is pug code of login and singup page

.img#menu-icon
    img(src="./menu-icon.svg", alt="Menu icon")
  #navbarSupportedContent.collapse.navbar-collapse
    .logo
      a(href="/")
        img(src="./logo.png" alt="entre logo")
    ul.navUl.navbar-nav.mb-2.mb-lg-0
      li#nav-item-1.navList.nav-item
        a.navLink.nav-link.text-dark(href="#") Home
      li#nav-item-1.navList.nav-item
        a.navLink.nav-link.text-dark(href="#") Order

Any solution for this problem?

CodePudding user response：

1. Add this middleware in the app.js above you set view engine

  app.use(express.static(path.join(__dirname, "public")));

2. Folder Structure

|__public/   
    |__ css/
        |__ css files...
    |__ js/
        |__ js files...

3. Import this way

Now you set the path to the public directory you have to give the path public folder when you import

<link rel="stylesheet" href="/css/main.css" />

NOTE:-

One more thing public directory in root and also app.js file should be in the root if you want app.js in src then set path accordingly

You should now be all set up to access CSS or any file