表示不使用绝对路径加载图像

Question

我正在制作一个 NodeJS 应用程序，并且我有一个 div 元素，其背景图像设置在外部 CSS 文件中。 CSS 文件本身工作得很好，没有问题。此外，当我在没有节点的情况下加载 HTML 时，背景图像显示得很好。

CSS：

#schoolInfo {
  display: block;
  background-image: url('slide1pic.jpg');
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}

app.js：

var express = require('express');
var app = express();
var serv = require('http').Server(app);
var io = require('socket.io')(serv);
var path = require('path');

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

app.use(express.static('client/home'));

app.post('/createSchool', function(req, res) {

  app.use(express.static('client/school'));
  res.sendFile(path.join(__dirname, '/client/school/index.html'));

  io.emit('updateSchool', response);
});

serv.listen(3000);
console.log("Server started on localhost://3000");

很明显，我使用的是绝对 URL，所以我不知道为什么 express 找不到它。我在命令提示符（这是我运行服务器的地方）或浏览器的控制台中没有收到任何错误。

我需要在我的 app.js 中添加一些东西吗？任何帮助将不胜感激。

Answer 1

您在提供文件的 url 中缺少路由表单：

app.use('/', express.static('client/home'));

路径“/”是相对于您开始节点进程的位置。

如果您的 home 目录中有一个 index.html 文件，那么您可以在其中有一个 images 文件夹，并且您的 express.static() 将如下所示：

app.use('/images', express.static('client/home'));

在您的 html 文件中，您只需输入：

<img src="images/file.png" />

然后你只需要在以下位置启动你的节点进程：

client\home > node server.js