What it looks like when the server is running on localhost:300 :
What the HTML looks like itself:
I am very new to this and trying to make a video game website for people to purchase things. I wanted to have pictures of the game so that it can make the webpage look nicer but I can't seem to see the pictures on the server. I can see them on the HTML file when opened in chrome but not on localhost. I have done a lot of research on this and can't seem to figure it out. Is there any chance I can get some help on being able to get the images to show on the server?
HTML Code
<!DOCTYPE HTML>
<HTML>
<style type="text/css">
/* start of nav css*/
*{
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #f00253;
padding: 20px;
}
.nav{
list-style-type: none;
display: -webkit-inline-flex;
background-color: #3f3d3d;
padding-left: 25%;
margin: 0;
width: 100%;
}
.nav li a {
color: white;
font-size: 18px;
padding: 20px 70px;
display: block;
text-decoration: none;
}
.nav li a:hover {
background-color: #f00253;
}
/* finish of nav css*/
</style>
<head>
<title>Jonathan's Database Game Store</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<h1>Jonathan's Database Game Store</h1>
<ul >
<li><a href="#">Login</a></li>
<li><a href="#">PC Games</a></li>
<li><a href="#">Xbox Games</a></li>
<li><a href="#">Playstation Gmaes</a></li>
</ul>
<div >
<h2>Raingbow Six Seige</h2>
<img src="r6.webp">
</div>
</body>
</html>
server.js Code
const http = require('http')
const fs = require('fs')
const port = 3000
const server = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'})
fs.readFile('home.html', function(error, data) {
if (error) {
res.writeHead(404)
res.write('Error: File Not Found')
} else {
res.write(data)
}
res.end()
})
})
server.listen(port, function(error){
if (error) {
console.log('something went wrong', error)
} else {
console.log('server is listening on port ' port)
}
})
CodePudding user response：
The problem
Using NodeJS' HTTP module to make a HTTP server is pretty tedious, what the problem is, is that you aren't hosting the images on your HTTP server.
The fix
I would recommend that you use Express which makes everything way easier.
Install it with npm i express in console then you can use this code for your HTTP server
const express = require("express")
const app = express()
const server = app.listen(3000, () => { // create a HTTP server on port 3000
console.log(`Express running → PORT ${server.address().port}`)
});
app.use(express.static(__dirname, { // host the whole directory
extensions: ["html", "htm", "gif", "png"],
}))
app.get("/", (req, res) => {
return res.sendFile("./PC.html")
})
app.get("*", (req, res) => {
return res.sendStatus(404)
})
CodePudding user response：
I have figured out why Mushroom idiot's previous code did not work. was missing the __dirname in the following code res.sendFile(__dirname "/PC.html"). Here is the final code that works with the HTML and images.
const express = require("express")
const app = express()
const server = app.listen(3000, () => { // create a HTTP server on
port 3000
console.log(`Express running → PORT ${server.address().port}`)
});
app.use(express.static(__dirname, { // host the whole directory
extensions: ["html", "htm", "gif", "png"],
}))
app.get("/", (req, res) => {
res.sendFile(__dirname "/PC.html")
})
app.get("*", (req, res) => {
return res.sendStatus(404)
})