当我访问另一个页面时，图像、徽标和图标不显示。在这个项目中，我使用了 pug 模板引擎和 express.js

Question

当我访问另一个页面时，图像、徽标和图标不显示，但是当我返回主页时，图像完美显示

在这个项目中，我使用了pug模板引擎和express.js

下面link是项目文件夹和文件的图片

Project folder and files image

下面link是首页的图片

图片、徽标和图标显示完美，但在登录和注册页面上我遇到了图片问题

Home page

下面link是登录和注册页面的图片

在此页面上，图像未显示问题！

login and singup page

下面的部分是express.js代码

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}`)
})

下面是主页的pug代码

.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

以下部分是登录和注册页面的 pug 代码

.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

这个问题有什么解决办法吗？

Answer 1

1。在你设置视图引擎

上面的app.js中添加这个中间件

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

2。文件夹结构

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

3。这样导入

现在您将路径设置为 public 目录，您必须在导入时提供路径 public 文件夹

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

注意：-

还有一件事 public 根目录和 app.js 文件应该在根目录中，如果你想在 src 中 app.js 然后相应地设置路径

当我访问另一个页面时，图像、徽标和图标不显示。在这个项目中，我使用了 pug 模板引擎和 express.js

When I'm visiting another page, The images, logos, and icons are not displayed. In this project, I'm using the pug template engine and express.js

webserver

node.js

express

pug

1。在你设置视图引擎

2。文件夹结构

3。这样导入

注意：-

您现在应该已全部设置好可以访问 CSS 或任何文件