Express not loading image with absolute path

Question

I'm making a NodeJS app, and I've got a div element with a background-image being set in an external CSS file. The CSS file itself works absolutely fine, no problems there. Also, when I load the HTML without Node, the background image shows up just fine.

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");

As is evident, I'm using an absolute URL, so I don't know why express can't find it. I'm getting no errors in Command Prompt (which is where I'm running the server from) or the browser's console.

Do I need to add something to my app.js? Any help would be greatly appreciated.

You get no errors in the browser? Can you look at the sources tab and find your css file? — IrkenInvader, Mar 09 '19 at 21:15
Could you try putting the image in the same folder as your html and referencing it without the path? — IrkenInvader, Mar 09 '19 at 21:22

Carlos Jafet Neto · Accepted Answer · 2019-03-09T22:32:37.320

1

You are missing your routing form the url where you are serving your files:

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

The path '/' is relative from where you start your node process.

If you have an index.html file inside of your home directory than you can have an images folder there and your express.static() would look like this:

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

And in your html file all you need is to put:

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

Then you just need to start you node process at:

client\home > node server.js

edited Mar 09 '19 at 22:32

answered Mar 09 '19 at 21:59

Carlos Jafet Neto

871
7
11

How would this work if my images are in `client/assets/images`? – William Jones Mar 11 '19 at 20:06
You could do like this: app.use('/images', express.static('client/assets')); – Carlos Jafet Neto Mar 11 '19 at 22:32
This will map /images to client/assets/images: app.use('/images', express.static('client/assets/images')); – Carlos Jafet Neto Mar 12 '19 at 00:04
If I just put `` in my index.html file, the image shows up fine. But if I use `background-image` in my external CSS file, it doesn't show anything. – William Jones Mar 12 '19 at 07:58
Where are you placing your css files? Are you defining a class to load this image in the background? Can you show your css? – Carlos Jafet Neto Mar 12 '19 at 14:17
The CSS files are in the same folder as the HTML. I'll update the question. – William Jones Mar 12 '19 at 18:56
If you have all inside school, an images folder, the index.html file and the css file, you can have your middleware like this: app.use('/images', express.static('/client/school/images')) and your css like: background-image: url('images/slide1pic.jpg'); – Carlos Jafet Neto Mar 12 '19 at 19:19
So if I just replace `app.use('/images', express.static('/client/school/images')) ` with `app.use('/images', express.static('client/assets/images'))` then that would also work? – William Jones Mar 12 '19 at 19:24
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189908/discussion-between-william-jones-and-carlos-jafet-neto). – William Jones Mar 12 '19 at 19:42
how to use this with cloud functions – arslan Nov 23 '20 at 11:08

Express not loading image with absolute path

1 Answers1

Linked