Question

我在为node.js服务器设计的jade模板文件中包含了css文件，如下所示：

title Home page
style
  include homepage.css

使用node.js服务器渲染玉文件时，不会显示css文件中包含的图像，如下所示：

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function (req,res) {
res.render('homepage1.jade');   
});
app.listen(3000);

css文件是：

html, body, h1, h2, h3, h4, h5, p, ol, ul, li { 
}
body {font-size: 100%; font-weight: normal;  width:1365px; margin:auto;
}

#container { background-image: url("/views/technowiz_resized.jpg"); background-attachment:fixed;
}
header { width:1305px; height:100px; background-color:red; background-image:url(/views/ban_resized.png) ; text-align:center; border:10px solid black ; margin:auto;
}
#rosette { position:relative; right:550px; top:-80px;
}
footer
{
background-color:black;
border:3px solid white;

}




#sidebar 
{
    float: right;
    width: 400px;
}

#sidebar ulsb
{
    margin: 0;
    padding: 0;

list-style: none;
}

#sidebar lisb ulsb 
{

    padding: 20px;
}

#sidebar lisb lisb 
{
    padding: 2px 0;
    border-bottom: 1px dotted #333;

}


#sidebar h2sb 
{
    height: 35px;
    margin: 0;

    padding: 6px 0 0 20px;
    background: url(/views/post_title_bg.png) repeat-x;
    font-size: 153.9%;
    font-weight: normal;
    color: black;
}

#sidebar h5
{
    height: 25px;
    margin: 0;

    padding: 5px 0 0 5px;
    background: url(/views/post_title_bg.png) repeat-x;
    font-size: 110.9%;
    font-weight: normal;

    color: black;
}

#sidebar .pad 
{
    padding: 20px;
}

加载背景颜色但不加载图像。

views direcctory包含jade css文件，所有图像和te项目文件夹包含home.js文件和views文件夹。

即使没有指定/ views，即使只是直接在URL中写入post_title_bg.png，图像也不会加载。

任何帮助都会很棒。谢谢。

Answer 1

您目前只通过发送已呈现的页面来回复您对应用的'/'请求。因此，您的应用永远不会尝试从文件系统提供文件，这需要某种静态文件服务，如

app.use('/static', express.static('/public'));

来自Express API。

然后你必须将你的图像放到'/public/image.jpg'并将CSS中的URL更改为'/static/image.jpg'。

那么为什么样式表会起作用呢？ 样式包含指令将样式表的内容复制到生成的HTML的标题中，而不是创建相对样式链接 - 因此您的浏览器永远不必要求样式表文件（相对样式链接）可能是更好的选择，但是。）

此外，您的标题图片网址缺少引号。

图像nt在node.js上以jade显示

1 个答案: