0

Ok, I figured out a solution for my problem but I would like to know if anyone can help me understand why this happened.

My app.js has:

app.use(express.static(__dirname + '/public'));

and static files are served as expected.

Except, when I tried to add a background image in my css:

html {
    background: url(img/tree.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I had the error: 

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/css/img/tree.jpg". localhost/:1

Now when I change the CSS to /img/tree.jpg

The file is served correctly -- so here is a question -- there shouldn't be any file at /css/img/tree.jpg so why does the server think an image is sent with text headers instead of just returning resource not found?

Thank you for your help!

paniclater
  • 903
  • 1
  • 12
  • 18

1 Answers1

0

Ok figured this out.

I had another route set up to serve up an angular page to consume my REST api. 

app.get('*', function(request, response) {
        var options = {
            root: __dirname + '/public/'
    }
    response.sendFile('./views/index.html', options);
});

This meant that when the path was set incorrectly in the CSS file for the background image I THINK that express just went ahead and tried to serve up the index.html file. This meant the CSS page was saying that the file was an image, but the server was saying that the file was html. This is why the header appeared to be wrong and there wasn't just a broken link when the app tried to load the image.

paniclater
  • 903
  • 1
  • 12
  • 18