Pug不显示图片

Question

我只是想在express中玩玩，但我无法理解视图引擎。我没有得到背景图片，或者任何要显示的图片。我在html中尝试了同样的css代码，看起来还不错，但在pug中却是空白的。

我有以下结构：

-public
--home.jpg
--styles.css
-views
--index.pug 
-main.js

除此之外，视图引擎似乎可以很好地呈现pug页面，并将简单的css逻辑加载到页面中。

main.js 

const debug = require("debug");
const path = require("path");
const express = require("express");
const app = express();
const dotenv = require("dotenv");
const timeout = require("connect-timeout");
dotenv.config();

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

// Home Route
app.get("/", (req, res) => {
  res.render('index');
});

Background-image应加载图像

index.pug

doctype html
html
  head
    style 
      include ../public/styles.css
    title Basic Website
  body
    .container 
      .background-image
        .header
          h1. 
            The basic website 

当我检查页面时，容器和图像的属性就会显示出来，但图像仍然不可见

styles.css

.container{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*Background image*/
/*****************/
.background-image{
  width:100%;
  height: 100%;
  background: url("home.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
}  

Answer 1

Express JS不允许提供静态文件，如图片、视频等。静态文件由客户端从服务器下载。然而，如果我们必须提供静态文件，我们将不得不启用专门用于此目的的中间件。为此，首先我们将在项目目录中创建一个名为public的文件夹或目录，然后在index.js中添加以下代码行。

//use middleware to serve static files
app.use(express.static('public'));

之后，只需将图片添加到公共文件夹，并在pug中使用以下命令引用它们：

img(src="/name.png"，alt=“图片”)

摘自：https://learncybers.com/static-files-in-express-js/