When i run my webpage through VS code all of my pictures show up but for some reason when i do it through localhost none of the pictures or CSS are being sent through. this is my code below, any help would be appreciated. i have tried to find solutions online but nothing has seemed to work so far.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/public/CSS/index.css" type="text/css" />
<style>
body {
align-items: center;
text-align: center;
background-image: url("../Images/backgroundImages.png");
min-height: 100%;
}
h1 {
font-size: 30px;
line-height: 1;
justify-content: center;
color: #66fcf1;
align-items: center;
text-decoration: none;
}
h2 {
font-size: 100px;
text-decoration: none;
line-height: 1;
justify-content: center;
color: #66fcf1;
align-items: center;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 30px;
margin-left: 25%;
margin-right: 25%;
color: #c5c6c7;
}
a:hover {
color: white;
text-decoration: underline;
background-color: rgb(52, 52, 126);
}
a {
color: #1f2833;
background-color: #45a29e;
text-decoration: none;
}
.dropbtn {
background-color: #66fcf1;
color: #1f2833;
padding: 10px 20px;
border: none;
cursor: pointer;
position: fixed;
left: 50px;
top: 155px;
}
.dropdown {
position: fixed;
left: 0;
right: 0;
top: 175px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
font-family: "Century Gothic", sans-serif;
}
.dropdown-content a {
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
font-size: 20px;
}
.dropdown-content a:hover {
background-color: #1f2833;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: black;
}
</style>
<body>
<h1>CSCI 355 Dashboard</h1>
<div >
<button >Menu</button>
<div >
<a href="https://github.com/aviglazer1998/355-Website">Github</a>
<a href="/public/HTML/weatherApp.html">Weather App</a>
<a href="/public/HTML/resume.html">Resume</a>
<a href="https://boilerplate-npm-4.aviglazer1998.repl.co">Managing Packages with NPM</a>
<a href="https://boilerplate-express-6.aviglazer1998.repl.co">Basic Node and Express</a>
<a href="https://boilerplate-mongomongoose-8.aviglazer1998.repl.co">MongoDB & Mongoose</a>
<a href="https://chalkboard-355.herokuapp.com/">Chalkboard</a>
<a href="https://github.com/aviglazer1998/chalkboard">Chalkboard Github</a>
<a href="/public/HTML/backpack.html">Backpack LL</a>
<a href="https://boilerplate-project-timestamp-1.aviglazer1998.repl.co">Timestamp Microservice</a>
<a href="https://boilerplate-project-headerparser.aviglazer1998.repl.co">Request Header Microservice</a>
<a href="https://boilerplate-project-urlshortener-1.aviglazer1998.repl.co">URL Shortner Microservice</a>
<a href="https://boilerplate-project-exercisetracker.aviglazer1998.repl.co">Excercise Microservice</a>
<a href="https://boilerplate-project-filemetadata.aviglazer1998.repl.co">Metadata Microservice</a>
</div>
</div>
</body>
</html>
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const router = express.Router();
const mongoose = require("mongoose");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const dbURI = "mongodb srv://username:[email protected]/chalkboard?retryWrites=true&w=majority";
mongoose
.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
.then((result) => app.listen(process.env.PORT || 8000))
.catch((err) => console.log(err));
app.use(express.static("/public"));
app.listen(() => {
console.log(`App listening on port 8000`);
});
app.get("/", (request, response) => {
response.sendFile(__dirname "/public/HTML/index.html");
});
app.get("/public/HTML/index.html", (request, response) => {
response.sendFile(__dirname "/public/HTML/index.html");
});
app.get("/public/HTML/resume.html", (request, response) => {
response.sendFile(__dirname "/public/HTML/resume.html");
});
app.get("/public/HTML/weatherApp.html", (request, response) => {
response.sendFile(__dirname "/public/HTML/weatherApp.html");
});
app.get("/public/HTML/backpack.html", (request, response) => {
response.sendFile(__dirname "/public/HTML/backpack.html");
});
CodePudding user response：
Given the location of your files, you have to give express.static(), the actual location in your file system relative to your project. For a link like this to be served by express.static():
Option 1
You would need to change this:
app.use(express.static("/public"));
to this:
app.use("/public", express.static(path.join(__dirname, "public")));
Option 2
Or, you can remove the /public from the link and use this type of link:
with this:
app.use(express.static(path.join(__dirname, "public")));
And, with option 1, change this:
background-image: url("../Images/backgroundImages.png");
to this:
background-image: url("/public/Images/backgroundImages.png");
or with option 2, change to
background-image: url("/Images/backgroundImages.png");
You do not want to be using path relative URLs when specifying any resources because that then depends upon the URL of the page which is not something you usually want. Instead, static resources should be referenced with a leading /.