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.
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');
});
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
try:
app.use(express.static('public'));
instead of
express().use(express.static('public'));
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.