表示不加载具有绝对路径的图像

时间:2019-03-09 21:12:47

标签: javascript html css node.js express

我正在制作一个NodeJS应用程序,并且在外部CSS文件中设置了带有背景图像的div元素。 CSS文件本身工作正常,没有问题。另外,当我加载不带Node的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吗?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

您缺少用于提供文件的网址的路由:

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