哈巴狗不会显示图片

问题描述

我只是想玩快递，但是我很难理解视图引擎。我没有背景图片，也没有显示任何图片。我在html中尝试了相同的CSS代码，看起来不错，但在哈巴狗中它只是空白。

我具有以下结构：

-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');
});

背景图片应加载图片

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;
}  

解决方法

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/