I am trying to display some images on my webpage using node js express and hbs file the image is not being displayed on web page getting error GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)
.hbs code -
<!DOCTYPE html>
<html>
<head>
<title>ParkEase - Parking Management System</title>
<style>
/* Your CSS styles here */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.header {
text-align: center;
padding: 20px 0;
background-color: #4CAF50;
color: #ffffff;
}
.container {
width: 90%;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.row {
width: 100%;
display: flex;
justify-content: space-between;
}
.parking-container {
width: 30%;
margin-bottom: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer; /* Add cursor style to indicate it's clickable */
}
.parking-container img {
width: 100%;
border-radius: 5px;
margin-bottom: 10px;
}
.parking-info {
text-align: left;
}
.time-period {
text-align: left;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>ParkEase - Parking Management System</h1>
</div>
<div class="container">
<div class="row">
<div class="parking-container" onclick="promptRent('Parking 1', '1')">
<img src="pexels-abdulwahab-alawadhi-3422964.jpg" alt="Parking 1">
<div class="parking-info">
<h3>Parking spot - 1</h3>
<p>Parking: P1</p>
</div>
</div>
<div class="parking-container" onclick="promptRent('Parking 2', '2')">
<img src="/tempelates/P2.jpg" alt="Parking 2">
<div class="parking-info">
<h3>Parking spot - 2</h3>
<p>Parking: P2</p>
</div>
</div>
<div class="parking-container" onclick="promptRent('Parking 3', '3')">
<img src="/tempelates/P3.jpg" alt="Parking 3">
<div class="parking-info">
<h3>Parking spot - 3</h3>
<p>Parking: P3</p>
</div>
</div>
</div>
</div>
<script>
function promptRent(parking, parkingSpot) {
var vehicleNumber = prompt("Enter Vehicle Number:");
if (vehicleNumber) {
var daysCount = prompt("Enter the number of days for parking:");
if (daysCount) {
var totalCost = 100 * daysCount; // Assuming the cost per day is $100
// Calculate rental start time (current time)
var rentalStartTime = new Date();
var rentalStartFormatted = formatDateTime(rentalStartTime);
// Calculate rental end time by adding the specified number of days to the start time
rentalStartTime.setDate(rentalStartTime.getDate() + parseInt(daysCount));
var rentalEndFormatted = formatDateTime(rentalStartTime);
// Print the receipt with rental start and end times, including the date and time
alert("Receipt\n\nParking: " + parking + "\nVehicle Number: " + vehicleNumber + "\nParking Spot: " + parkingSpot + "\nRental Start: " + rentalStartFormatted + "\nRental End: " + rentalEndFormatted + "\nTotal Cost: $" + totalCost);
}
}
}
function formatDateTime(date) {
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0'); // January is 0!
var yyyy = date.getFullYear();
var hours = String(date.getHours()).padStart(2, '0');
var minutes = String(date.getMinutes()).padStart(2, '0');
var seconds = String(date.getSeconds()).padStart(2, '0');
return mm + '/' + dd + '/' + yyyy + ' ' + hours + ':' + minutes + ':' + seconds;
}
</script>
</body>
</html>
.js code -
const express=require("express")
const app=express()
const path=require("path")
const hbs=require("hbs")
const collection=require("./mongodb")
const tempelatePath=path.join(__dirname, '../tempelates')
app.use(express.static(path.join(__dirname, '../tempelates')));
app.use(express.json())
app.set("view engine", "hbs")
app.set("views", tempelatePath)
app.use(express.urlencoded({extended:false}))
app.get("/",(req, res) => {
res.render("login")
})
app.get("/signup",(req, res) => {
res.render("signup")
})
app.post("/signup", async (req, res) => {
const data={
name:req.body.name,
password:req.body.password
}
await collection.insertMany([data])
res.render("login")
})
app.post("/login", async (req, res) => {
try{
const check=await collection.findOne({name:req.body.name})
if(check.password===req.body.password){
res.render("home")
}
else{
res.send("wrong password")
}
}
catch{
res.send("Wrong details")
}
})
app.listen(3000,() => {
console.log("port connected");
})
the three images P1.jpg P2.jpg P3.jpg is not being displayed instead icon is being displayed
tried diiferent things
This tells the middleware that when you ask for
/foo/bar.bazit should look for a file at__dirname/../tempelates/foo/bar.baz.You are asking for
http://localhost:3000/tempelates/P2.jpgso it is looking for ``__dirname/../tempelates/tempelates/P2.jpg`.You are unlikely to be doubling up the directory there.
Presumably you either want:
http://localhost:3000/P2.jpgtemplatesin the URL from the search:app.use('/templates', express.static(path.join(__dirname, '../tempelates')));Note that that isn't how you spell templates and that images aren't templates so that's probably not a good directory name anyway.