I tried looking for information regarding this but everything includes Express JS which I cannot use for this task. I need to display index.html with pictures and an external CSS file called styles.css. I am successful in displaying the HTML. For the pictures I also tried using "<img class="logo" src="http://localhost:8888/pic.png" alt="My_Logo" />"
This also does not work.
Here is my JS code.
var http = require("http");
var fs = require('fs');
function onRequest(request,response){
response.writeHead(200,{'Content-Type':'text/html'});
fs.readFile('./index.html',null,function(error,data){
if(error){
response.writeHead(404);
response.write('File not found');
}else{
response.write(data);
}
response.end();
});
}
http.createServer(onRequest).listen(8000);
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project 2</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<img class="logo" src="http://localhost:8888/pic.png" alt="My_Logo" />
<div class="head">
<h1>Social Media Network</h1>
</div>
<div class="startHeader">
<img src="pic1.png" class="bottompic" alt="" />
<h2>Start Your Network Today</h2>
</div>
</body>
</html>
EDIT: Im going to try this out : Node.js - external JS and CSS files (just using node.js not express)