node.js simple HTTP server with content html not showing images - node.js

Question

I am following along with the tutorials on The New Boston from Bucky and cant seem to get images to show up in the HTML file running a simple static index page in node.js
please note: this is a school project, I am tasked with doing this without using middle-ware such as express or connect which we have not reached yet. :D
var http = require('http');
var fs = require('fs');
var accessTime = new Date();
var accessCount = 0;
function send404Response(response) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("Error 404: Page not found!");
response.end();
}
function onRequest(request, response) {
if (request.method == 'GET' && request.url == '/' ){
response.writeHead(200, {"Content-Type": "text/html"});
fs.createReadStream("./index.html").pipe(response);
fs.writeFileSync("logfile.txt", "\n Someone has accessed the index page \n" + accessTime + "\n ", "UTF-8",{'flags': 'a'});
console.log("A user made a request");
accessCount += 1;
console.log(accessCount + " page requests so far . . .");
}else {
send404Response(response);
}
}
http.createServer(onRequest).listen(8888);
console.log("Server is running...");
When I run it, the html page loads fine as localhost:8888 but no images will show up unless I use external images. for example the html would just have standard image tags?
<img src='photo.jpg' .... /> // doesnt work
<img src='http://www.AWebSite.com/photo.jpg' .... /> // naturally works
Thanks!!

Answer 1

Right, so at the moment you're not providing a code path for the images. Your first code block responds to 'http://localhost:8888/' and nothing else; you wouldn't even serve 'http://localhost:8888/index.html' if someone requested it.
If you want to serve all static content, then there's a few ways to go about it. To be the most web server-like, you'd probably start off by having a known folder with your static assets (e.g. ./public). Then you'd want to just take request.url and look for that under the public path using fs.stat(). If that path exists in that location, then you'd check the file extension to figure out the Content-Type header and serve it like you're doing now. If not, then you'd return a 404 like you are currently doing.
If you're not allowed to use third party libraries at all, I'd also recommend chunking each logical bit into its own file that you can require. If you can use third party libraries (just not middleware), then I'd say look into async.js to help the file handling workflow a bit, and to avoid callback hell.