Nodejs can’t find images from html reference

I am working on a small web application and I want to make it as clean as possible (without api’s or frameworks * no express).

And as soon I started I’ve encountered my first problem.

Once I’m rendering a html file using nodejs, the references toward files in general that you call from the inside of the html are “not there”?

GET http://localhost:3000/Footage/UserTemplateIcon.png 404 (Not Found)

If I try to run the html as an individual file (without node) my image is being found, but for some reason not with nodejs

This is my file structure

My nodejs code:

const http = require('http'),
    port = 3000,
    fs = require('fs'),
    events = require('events'),
    util = require('util');
var myEmitter = new events.EventEmitter();


const server = http.createServer((req, res) => {
    if(req.url === "/"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Main page");

    } else 
    if(req.url === "/feed"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/Feed/index.html', 'utf8');
        myReadStream.pipe(res);
    }
    else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/404/index.html', 'utf8');
        myReadStream.pipe(res);
    }
});

server.listen(port, () => {
    console.log(`Server running on ${port}`);
})

JavaScript
​x
 
const http = require('http'),
    port = 3000,
    fs = require('fs'),
    events = require('events'),
    util = require('util');
var myEmitter = new events.EventEmitter();
​
​
const server = http.createServer((req, res) => {
    if(req.url === "/"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Main page");
​
    } else 
    if(req.url === "/feed"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/Feed/index.html', 'utf8');
        myReadStream.pipe(res);
    }
    else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/404/index.html', 'utf8');
        myReadStream.pipe(res);
    }
});
​
server.listen(port, () => {
    console.log(`Server running on ${port}`);
})
​

and my html

<html>
<head>
   <div class="headerUserIcon"><img src=".FootageUserTemplateIcon.png"></div>
</head>
<body>
</body>
</html>

JavaScript
 
<html>
<head>
   <div class="headerUserIcon"><img src=".FootageUserTemplateIcon.png"></div>
</head>
<body>
</body>
</html>
​

I found multiple solutions with express where people say’d that you have to serve your static files from express something like

app.use(express.static(‘src’));

But i’d like to do this without express.

*update: adding . before the link to my file returns me this error

Not allowed to load local resource: file://.//Footage/UserTemplateIcon.png

Answer

Your program contains code like this:

if(req.url === "/"){
    /* send something */
} 
else if(req.url === "/feed"){
    /* send something  else*/
}
else {
   /* send an error */
}

JavaScript
 
if(req.url === "/"){
    /* send something */
} 
else if(req.url === "/feed"){
    /* send something  else*/
}
else {
   /* send an error */
}
​

If you want to send other files (.pngs for example), each of them must appear in that if/else if cascade, or in a switch statement, or in some kind of parsing of req.url. A plain node http server knows nothing about any file system. It’s totally stripped down. (It’s different from nginx or apache that way.)

Express provides a nice framework to teach node html servers about file systems, and content types, and routes, and streams, and pipes and the rest. Without express you need to teach the html server about your png files, and css, and js, etc, yourself.

Advertisement

Answer