【发布时间】：2021-02-16 11:29:47
【问题描述】：
如前所述，express 不会从公共目录中的 image 文件夹中提取图像，即使它正在提取公共目录中 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>
```
【问题讨论】：
-
你能显示你的html，并尝试添加
__dirname吗？ -
刚刚添加到原问题中，感谢您的帮助！如果您还需要什么，请告诉我:)
标签： javascript css express