CSS 背景图片未使用 Node.js 在本地主机上加载

Question

我已经尝试了很多解决的例子，但我无法解决问题。除背景图像外，所有内容都显示在本地主机上。我使用 sendFile() 来引用 style.css 文件。

test.js

var express = require("express");
var app     = express();
var path    = require("path");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static('image')); //I am not sure about this line.


app.get('/index.html',function(req, res){
res.sendFile(path.join(__dirname+'/index.html'));
});

app.get('/style.css', function(req, res){
res.sendFile(path.join(__dirname+'/style.css'));
});

style.css

.container-home {
width: 100%;
height: 30em;
display: flex;
flex-direction: column;
transition: background-size 2s ease-in-out 1s;
background-image: url(image/Greenery.jpg);
background-size: 100%;
background-position: center;
position: relative;
}

文件结构

Code
 |_ tree
      |_ image
          |_ Greenery.png

Answer 1

将您的项目结构更改为类似这样的内容

--- root
  --- server.js
  --- public
   --- styles
     --- style.css

现在把你的静态线路改成这个

app.use(express.static('public')); // this tells express serve static assets here to the user

现在，当您导航到 localhost/styles/style.css 时，您会得到 css 文件，您不必为其指定路径，因此您可以从代码中删除它

//remove this
app.get('/style.css', function(req, res){
res.sendFile(path.join(__dirname+'/style.css'));
});

Answer 2

来自docs：

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

所以在你的情况下，因为你正在制作 images 静态目录，所以它不应该在 URL 中。您的 CSS 当前包含它：localhost:3000/image/Greenery.jpg. .

我会把 background-image: url(image/Greenery.jpg); 改成
background-image: url(Greenery.jpg);

或者您可以尝试像这样创建虚拟路径前缀而不编辑 CSS:

app.use('/image', express.static('image'))

还要注意这部分：

However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

所以在你的情况下应该是这样的：

const path = require('path')
app.use('/image', express.static(path.join(__dirname, 'tree', 'image')))

CSS 背景图片未使用 Node.js 在本地主机上加载

CSS background image is not loaded on localhost using Node.js

css

background-image

node.js