Express.static 不從公共目錄中提取圖像

Question

如前所述，express 不會從公共目錄中的圖像文件夾中提取圖像，即使它正在提取位於公共目錄中 css 文件夾中的 styles.css 文件。

目錄 public 包含 2 個文件夾，一個用於 css，一個用於圖像。

我還嘗試添加app.use(express.static('images')); 甚至可以定位公共目錄中的圖像文件夾，但這也不起作用。 雖然只顯示鏈接地址的圖像，但目錄中的圖像不會。

任何幫助將不勝感激，我已經做了一些谷歌搜索，但繼續得到相同的答案 - 使用 express.static - 我還嘗試在'public'前面添加__dirname但這會產生錯誤。

我的服務器的代碼如下：

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")

});

這也是我的 html 的片段——header.ejs 文件——其中應該顯示徽標，但不是。

就使用 ```__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

首先，您不需要src上的完整路徑。

其次，路徑上不能有空格。

所以嘗試改變路徑，並告訴我它是否有效。

<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