使用Pug和expressjs路由，CSS将不会显示和图像加载，但是数据在那里

编程问答 2022-08-16

问题描述

这仅在我使用路线时发生。

./ routes / users.js 

const express = require('express');
const router = express.Router();
const dbQuery = require('../controllers/db_query');

router.get('/',async function(req,res) {
  console.log('ROUTE - /');
  const result = await dbQuery.getUsers();
  res.render('users',{
    data: result
  });
});

router.get('/:id',res) {
  console.log('ROUTE - /id');
  const result = await dbQuery.getUser(req.params.id);
  console.log('result',result);
  res.render('user',{
    data: result
  });
});

module.exports = router;

./ App.js 

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));

app.use('/',indexRouter);
app.use('/users',usersRouter);

// catch 404 and forward to error handler
app.use(function(req,res,next) {
  next(createError(404));
});

// error handler
app.use(function(err,req,next) {
  // set locals,only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

./ routes / users.js 

const router = express.Router();
const dbQuery = require('../controllers/db_query');

router.get('/',{
    data: result
  });
});

module.exports = router;

./ views / users.pug 

extends layout

block content
  // Navigation
  nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
    .container
      a.navbar-brand.js-scroll-trigger(href='/') Node.js Excersise
      button.navbar-toggler.navbar-toggler-right(type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation')
        | Menu
        i.fas.fa-bars
  // Masthead
  header.masthead
    .container.d-flex.h-100.align-items-center
      .mx-auto.text-center
        h1.mx-auto.my-0.text-uppercase Users List
        h2.text-white-50.mx-auto.mt-2.mb-5 This is where you can find all the users.
  // Projects
  section#projects.projects-section.bg-light
    .container
        .col-md-10.col-lg-8.mx-auto.text-center
          ul
          each user in data
            div(class='profile-tile')
              img(class='img-rounded' src='images/profile/' + user.Uid + '.jpg' alt= user.Uid + ' image')
              br
              a(class='profile-name' href='/users/' + user.Uid)= user.Uname
              li(style='list-style-type:none')= user.Uemail
  // Contact
  section.contact-section.bg-black
    .container
      .col-md-10.col-lg-8.mx-auto.text-center
          button.btn.btn-primary.mx-auto(onclick="window.location.href='/'") Back
      .social.d-flex.justify-content-center
        a.mx-2(href='#!')
          i.fab.fa-twitter
        a.mx-2(href='#!')
          i.fab.fa-facebook-f
        a.mx-2(href='#!')
          i.fab.fa-github
  // Footer
  footer.footer.bg-black.small.text-center.text-white-50
    .container Copyright © : node.js.exercise 2020
  // Bootstrap core JS
  script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js')
  script(src='javascript/bootstrap.bundle.min.js')
  // Third party plugin JS
  script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js')
  // Core theme JS
  script(src='javascripts/scripts.js')

下面是我的问题。 我试图显示从数据库获取的数据，并按路线传递以进行渲染。 （请参阅h1和img ） 我得到了预期的结果，但是图像（img）没有显示并且页面的CSS。

下面的代码与./views/users.pug相同，我只是以更简单的方式显示了数据。

./ views / user.pug 

extends layout
block content
  nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
    .container
      a.navbar-brand.js-scroll-trigger(href='/') Node.js Excersise
      button.navbar-toggler.navbar-toggler-right(type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation')
        | Menu
        i.fas.fa-bars
  // Masthead
  header.masthead
    .container.d-flex.h-100.align-items-center
      .mx-auto.text-center
        h1.mx-auto.my-0.text-uppercase Users List
        h2.text-white-50.mx-auto.mt-2.mb-5 This is where you can find all the users.
  // Projects
  section#projects.projects-section.bg-light
    .container
        .col-md-10.col-lg-8.mx-auto.text-center
          div(class='profile-tile')
            img(class='img-rounded' src='images/profile/' + data[0].Uid + '.jpg' alt='image')
            h1= data[0].Uid
            h1= data[0].Uname
            h1= data[0].Uemail
  // Contact
  section.contact-section.bg-black
    .container
      .col-md-10.col-lg-8.mx-auto.text-center
          button.btn.btn-primary.mx-auto(onclick="window.location.href='/'") Back
      .social.d-flex.justify-content-center
        a.mx-2(href='#!')
          i.fab.fa-twitter
        a.mx-2(href='#!')
          i.fab.fa-facebook-f
        a.mx-2(href='#!')
          i.fab.fa-github
  // Footer
  footer.footer.bg-black.small.text-center.text-white-50
    .container Copyright © : node.js.exercise 2020
  // Bootstrap core JS
  script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js')
  script(src='javascript/bootstrap.bundle.min.js')
  // Third party plugin JS
  script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js')
  // Core theme JS
  script(src='javascripts/scripts.js')

./ views / layout.js 

head
  meta(charset='utf-8')
  meta(name='viewport' content='width=device-width,initial-scale=1,shrink-to-fit=no')
  meta(name='description' content='')
  meta(name='author' content='')
  title Node.js
  link(rel='icon' type='image/x-icon' href='/images/favicon.ico')
  // Font Awesome icons (free version)
  script(src='https://use.fontawesome.com/releases/v5.13.0/js/all.js' crossorigin='anonymous')
  // Google fonts
  link(href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet')
  link(href='https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i' rel='stylesheet')
  // Core theme CSS (includes Bootstrap)
  link(href='stylesheets/styles.css' rel='stylesheet')
body
  block content

我试图弄清楚为什么当我去时它不能正确渲染： localhost / users / 1

最后，我注意到当我去那条路线时 本地主机/用户 我得到了预期的结果。但是如果我在最后放置'/' 本地主机/用户/ 我将遇到上述问题。没有CSS，它没有读取我在应用中为我的图片定义的静态图片：app.use(express.static(path.join(__dirname,'public')));

我有2个星期的学习node.js的时间，现在正在尝试使用它学习PUG。

谢谢大家。

解决方法

设法从我的同事那里得到答案（谢谢凯文）。

问题的原因是，我没有在{strong> ./ views / layout.pug 中放置/中的'link(href='stylesheets/styles.css' rel='stylesheet')'。这会导致浏览器假定路径是相对于文档的。

注释： 可以在浏览器的网络调试标签中进行检查。

当我进入 localhost：port / users 时，相对路径就可以了，因为当前URL没有'/'。因此样式表可以在网址中使用

localhost：port /用户

localhost：port / edit

以此类推...

样式表的相对路径为： localhost：port / stylesheets / styles.css（正确）

BUT （在路径中遇到“ /”时）。相对路径将根据其当前位置/ URL的路径进行更改。

在这种情况下。

例如

localhost：port / users /

localhost：port / users / 1

localhost：port / edit / abc

...

样式表现在将相对于以上这些路径或文档路径：

localhost:port/users/stylesheets/styles.css（不正确）

FIX

如果我们在开始处放置“ /”，浏览器将查找相对于网站根目录的页面（称为绝对URL）。

我也从这个问题中得到了一些想法： https://github.com/pugjs/pug/issues/2662

expresspug

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...