Node.js、Express.js 不向客户端发送文件

Question

I'm trying to send a gif to the client to use later in CSS. The console logs give me a 404 not found for the gif. It is in the public directory.

Server:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var express = require('express');
var peopleCount = 0;


express().use(express.static('public'));

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

CSS

span {
            background:url('public/gif.gif');
            background-repeat:repeat-x;
            background-position:0 0;
            text-align:center;
            color:transparent;
            -webkit-background-clip:text;
            -moz-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            font-weight: bold;
            font-size: 20px;
    }

The server sends the index.html file fine, but not the gif.gif

Answer 1

try:

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

instead of

express().use(express.static('public'));

Answer 2

For starters, public/gif.gif is a relative reference, so this will look for the file at <window location>/public/gif.gif . Assuming you want this to reference the <root>/public/gif.gif , use an absolute reference (notice the leading / ):

background:url('/public/gif.gif');

In addition, the static directories should be bound to the app instance, and should specify a name to be used when calling to the server:

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

in the above example, the __dirname + /public directory in your project would be located at /public when making calls to the server.