Express.static 不从公共目录中提取图像

Question

As mentioned, express is not pulling the images from image folder in the public directory, even though it is pulling the styles.css file which is in the css folder in the public directory.如前所述，express 不会从公共目录中的图像文件夹中提取图像，即使它正在提取位于公共目录中 css 文件夹中的 styles.css 文件。

The directory public contains 2 folders one for css and on for images.目录 public 包含 2 个文件夹，一个用于 css，一个用于图像。

I also tried adding app.use(express.static('images'));我还尝试添加app.use(express.static('images')); to even target the image folder within the public directory, however that didn't work either.甚至可以定位公共目录中的图像文件夹，但这也不起作用。 While images with only a link address show up, the images from the directory do not.虽然只显示链接地址的图像，但目录中的图像不会。

Any help would be greatly appreciated, I've done a fair bit of googling, but continue getting the same answer -- use express.static - I also tried adding the __dirname in front of the 'public' but that created an error.任何帮助将不胜感激，我已经做了一些谷歌搜索，但继续得到相同的答案 - 使用 express.static - 我还尝试在'public'前面添加__dirname但这会产生错误。

The code for my server is as follows:我的服务器的代码如下：

const express = require("express");
const bodyParser=require("body-parser")
const ejs = require('ejs');


const app = express();


app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static('public'));


app.get("/", function(req, res){
    res.render("index");
});

app.get("/prices", function(req, res, ){
    res.render("prices");
});

app.get("/about", function(req, res, ){
    res.render("about");
});
app.get("/contact", function(req, res, ){
    res.render("contact");
});

const PORT = process.env || 3000;

app.listen(3000,function(){
    console.log("server started")

});

Here is also a snip of my html -- the header.ejs file -- in which the logo should be shown, but is not.这也是我的 html 的片段——header.ejs 文件——其中应该显示徽标，但不是。

In terms of using the ```__dirname''' it was implemented as such就使用 ```__dirname''' 而言，它是这样实现的

   app.use(express.static(__dirname, 'public'));

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delta Designs | Web Design for the Future</title>

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Sacramento&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
        rel="stylesheet">


    <!-- CSS StyleSheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/css/styles.css">



    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/ef786af6a6.js" crossorigin="anonymous"></script>

    <!-- bootstrap scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>




<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">
        <img class="deltaLogo"  src="C:\Users\james\Web Dev\vandenbergDevelopment\public\images\1x\Asset 6@2x.png"
            href="#"></img></a>

    <div class="navbar-links">
        <ul class="navbar-nav flex">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/prices">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</a>

</div>
</head>
```

Answer 1

First, you don't need the full path on the src .首先，您不需要src上的完整路径。

Second, you can`t have white spaces on the path.其次，路径上不能有空格。

So try to change the path to this, and tell me if it works.所以尝试改变路径，并告诉我它是否有效。

<img class="deltaLogo"  src="\images\1x\Asset%206@2x.png"
            href="#"></img>

Express.static 不从公共目录中提取图像

问题描述

1 个解决方案

解决方案1
1 2021-02-16 12:02:33

Express.static 不从公共目录中提取图像

问题描述

1 个解决方案

解决方案1 1 2021-02-16 12:02:33

解决方案1
1 2021-02-16 12:02:33