玉模板上的背景图片答案

【问题标题】：Background image on jade tamplete玉模板上的背景图片
【发布时间】：2016-12-07 13:58:06
【问题描述】：

我正在使用节点 js（没有 express），但背景图片 url 有问题
.jade 文件

extends ../node_modules/pug-bootstrap/_bootstrap
block body
  style
    include style.css

style.css 文件：

body{
    background: #222 url('skyscrapers.jpg') center center no-repeat;
    background-size: cover;
    color: white;
    height: 100%;
    text-align: center;
    align-items: center;
  }

似乎背景颜色有效，但未加载 img。我在简单的 HTML 文件中检查它，一切正常。 img 的位置是正确的。

【问题讨论】：

如果将background 拆分为background-color、-image、-position 和-repeat 会发生什么？
试试看..还是不行

标签： css node.js pug

【解决方案1】：

图像将相对于生成的 HTML 文件加载。确保 skyscrapers.jpg 文件与您生成的 HTML 输出位于同一文件夹中。

【讨论】：

.pug 文件和 HTML 文件在同一个文件中
如何加载生成的 HTML？您是否将 pug 编译为文件并将其保存在同一文件夹中？
我使用writeHead()这样的函数var html = pug.renderFile('views/index.pug'); res.writeHead(200, {'Content-Type': 'text/html'}); res.write(html); res.end();
那根本行不通。你的浏览器中没有文件系统，所以不能pug.renderFile。我建议使用 pug-cli 提前使用 node.js 渲染文件，然后直接提供生成的 HTML。