问题：

快速不加载图像

邹缪文

2023-03-14

当我通过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");
});

这是我的文件结构

共有1个答案

闾丘选

2023-03-14

给定文件的位置，您必须给出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，而您通常不希望使用该URL。相反，静态资源应该用前导的/引用。

类似资料：

毕加索无法快速加载图像

我面临毕加索无法快速加载图像的问题。有3个显示左、中、右图像。在快进/后退时，对于给定的时间点，选择左、中、右并显示在三个框中。这是初始化。缓存是100MB以及99MB的窗口移动的图像数是3000。所以我将图像预加载为平均图像大小为10KB-320x180，因此达到35MB，小于99MB。当快速循环工作时，许多图像是（来自）和（来自），但在几个快速循环之后，3个图像冻结或变得非常慢。此时
在HTML上快速加载许多图像

问题内容：我正在编写一个脚本，用户可以在其中选择一系列数据，然后从服务器中获取一堆图像（超过150张），然后循环通过它们来制作电影。我想知道的是在移动图像槽时加载防止滞后的最有效方法。目前，我正在使用Ajax从服务器获取图像，并将其存储在JavaScript上的Image对象数组中。在HTML中，我有一个div标签，希望在其中放置图像。在数组中创建所有Image对象（并设置其适当的src）后，
javascript - JAVA如何加快图片的加载速度？

图片是放在金蝶服务器上，前端页面el-image的src放图片的访问路径，加载的速度得4 5秒吧，请问大神这种情况怎么优化，使图片的加载速度变快？
快速延迟加载属性

问题内容：我正在尝试把我的头围住Swift语言。使用Objective-C在代码中构建视图时，常见的模式是覆盖UI属性并像这样延迟加载它们：这允许将UIElement的配置包含在其设置中，但是不会导致每次都对其进行重新配置。看来我们无权访问Swift中的后备存储，并且关键字实际上没有相同的语义。我很好奇是否有人在Swift中找到了类似的模式，该模式允许人们以一种简洁的语法方式将变量和常量的
快速加载多级类别

我有一个带有父类id的categories表来存储类别和子类别。该类别可以是多级的，这意味着一个类别可以有子类别，每个子类别可以有子类别，依此类推。而且它是动态的，因此级别数量不受限制。我在类别模型中定义了一个函数，名称如下：现在我想急切加载的类别与子类别工作伟大，但它只得到一个级别的子类别，我想急于加载所有级别。差不多有办法吗？要获得所有类别级别？如果没有，如何在一个集合中获得所有级别的子
快速注释不同图像

问题内容：我设法在Swift中为注解图钉获得了一个自定义图标，但是现在我仍然对2个不同的注解使用不同的图像。现在，一个按钮会在地图上添加注释。应该有另一个按钮，该按钮也添加了注释，但带有另一个图标。有没有办法为此使用复用ID？问题答案：在委托方法中，设置调用该方法所基于的依据。一定要做到这一点后视图被出队或创建的（而不是只在部分）。否则，使用出队视图的注释将显示以前使用该视图的注释的

快速不加载图像

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档