如何解决哈巴狗不会显示图片
我只是想玩快递,但是我很难理解视图引擎。我没有背景图片,也没有显示任何图片。我在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 =“图片”)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。