Images are not loading on NodeJS server using localhost

Question

When I am trying to create a nodeJs server and running it, with the html file, it is not able to load the images.

This is the NodeJS code:

var http = require('http');
var fs = require('fs');
fs.readFile('main.html', function (err, html) {
    if (err) {
        throw err;
    }
    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
    }).listen(8000);
});

The code for the body of html file is:

<body>
<img id ="gug" src="./gugle.png">
<form>
    <div id = "inp">
    <input type="text" id = "tb" placeholder="Search Results" value="">
    </div>
    <span  style=" margin-left: 420px"> <input type="submit" style = "height: 30px;width: 120px; font-family: Arial; font-weight: bold" onclick="alert_prompt('tb')" value="Google Search">
    <input type="button" style = "height: 30px;width: 120px; font-family: Arial; font-weight:bold" onclick= "lolfnc()" value = "I'm feeling lucky">
    </span>
</form>

<p style="margin-left: 370px; font-family: 'Times New Roman'">
    Google.co.in offered in:<span style="color: blue; font-size: small; font-family: SansSerif"> हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</span>
</p>
</body>

and the html file is also in the same directory. Any help will be appreciated.

@kumbhanibhavesh I didnt get any error in the console. When I simply run the html file in the browser, everything went right but in the nodeJs server ,script and css was running correctly but image didnt appear. — Chanfool21, Oct 06 '17 at 12:17
@kumbhanibhavesh — The server will response to a request for `gugle.png"` with `response.writeHeader(200, {"Content-Type": "text/html"}); response.write(html);` so it won't 404. — Quentin, Oct 06 '17 at 13:04

score 0 · Answer 1 · answered Oct 06 '17 at 10:45

You need to serve all the assets in your directory not just the html file and specify the mime type. There is a library to get the file mime type called mime which can be installed with npm install. Alternatively you could just use a switch case with the few file types that you use.

const path = require('path')
const http = require('http');
const fs = require('fs');
const mime = require('mime');

http.createServer(function(request, response) {
    var filename = 'public'+request.url;
    if (fs.existsSync('public'+request.url)) {
        var fileExtension = path.extname(filename);
        var mimeType = mime.getType(fileExtension);
        response.writeHead(200, {"Content-Type": mimeType});
        var data = fs.readFileSync(filename);
        response.end(data);
    } else {
        //404 not found error
        response.writeHead(404, {"Content-Type": "text/html"});
        response.write("<h1>404 Not Found</h1>");
        response.end();
    }
}).listen(80);

Images are not loading on NodeJS server using localhost

1 Answers1