图像未显示在 node.js 上的翡翠中答案

【问题标题】：images nt displaying in jade on node.js图像未显示在 node.js 上的翡翠中
【发布时间】：2014-11-01 00:37:59
【问题描述】：

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

title Home page
style
  include homepage.css

当我使用node.js服务器渲染jade文件时，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 目录包含jade css 文件和所有图片和te 项目文件夹包含home.js 文件和views 文件夹。

即使未指定 /views 也不会加载图像，即即使仅在 url 中直接写入 post_title_bg.png。

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

【问题讨论】：

标签： css node.js express pug

【解决方案1】：

您目前仅使用您的应用为“/”提供请求，您通过发送呈现的页面来响应该请求。因此，您的应用永远不会尝试从文件系统提供文件，这需要某种静态文件服务，例如

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

来自Express API。

然后，您必须将图像放入“/public/image.jpg”，并将 CSS 中的 URL 更改为“/static/image.jpg”。

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

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

【讨论】：