當我通過 VS 代碼運行我的網頁時，我的所有圖片都會顯示出來，但是由于某種原因，當我通過 localhost 執行此操作時，沒有任何圖片或 CSS 被發送。這是我下面的代碼，任何幫助將不勝感激。我試圖在網上找到解決方案，但到目前為止似乎沒有任何效果。
<!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 class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<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");
});
這是我的檔案結構
uj5u.com熱心網友回復：
給定檔案的位置，您必須給出express.static()檔案系統中相對于專案的實際位置。對于這樣的鏈接，由以下人員提供服務express.static()：
選項1
你需要改變這個：
app.use(express.static("/public"));
對此：
app.use("/public", express.static(path.join(__dirname, "public")));
選項 2
或者，您可以/public從鏈接中洗掉并使用這種型別的鏈接：
有了這個：
app.use(express.static(path.join(__dirname, "public")));
并且，使用選項 1，更改此內容：
background-image: url("../Images/backgroundImages.png");
對此：
background-image: url("/public/Images/backgroundImages.png");
或使用選項 2，更改為
background-image: url("/Images/backgroundImages.png");
在指定任何資源時，您不希望使用路徑相對 URL，因為這取決于頁面的 URL，而這通常不是您想要的。相反，靜態資源應該使用前導/.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/378990.html
標籤：javascript html css 节点.js 表达
上一篇：快速路由在接收引數時給出404