快递不加载图片答案

【问题标题】：Express not loading Images快递不加载图片
【发布时间】：2022-01-15 06:29:30
【问题描述】：

当我通过 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:password@chalkboard.mc7fa.mongodb.net/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");
});

This is my file structure

【问题讨论】：

用您的用户名和密码向我们显示 mongdob URI 并不聪明
谢谢，我编辑了

标签： javascript html css node.js express

【解决方案1】：

给定文件的位置，您必须提供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，这不是您通常想要的。相反，静态资源应以/ 开头。

【讨论】：

@user13924996 - 非常感谢您提供目录结构的快照！那是关键。我们一直在这里遇到这样的问题，当人们不包括他们的目录结构时，我们无法判断出了什么问题。感谢您思考可能需要什么。