ejs 包含 header 但在某些页面中不加载图像

Question

Folder list

嗨，我是 node、express 和 ejs 的新手；这是我的项目的文件夹列表，出于某种原因，当我在 home.ejs 上包含 header 和页脚时，我可以在 navbar 上看到图像，但如果我在terms-condition.ejs，节点使用 footer 和 navbar 正确加载页面，但页面中未显示 logo-image。 home.ejs 和 terms-condition.ejs 之间的唯一区别是最后一个在 /views.

的子文件夹中

index.ejs

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

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("home");
});

app.get("/legal/terms-condition", function(req, res) {
    res.render("legal/terms-condition");
});

app.listen(3000, function(){
    console.log("Server started on port 3000.");
});

home.ejs

<%- include("common/header") -%>

<div class="box">
    <a href="./legal/terms-condition">Terms and Condition</a>
</div>

<%- include("common/footer") -%>

terms-condition.ejs

<%- include("../common/header") -%>

<div class="container">
    <div class="row">
        <div class="col-6">
            <h1>This is a sample</h1>
        </div>
        <div class="col-6">
            <p>Why ejs not load the logo in the navbar?</p>
        </div>
    </div>
</div>

<%- include("../common/footer") -%>

here link 我在 GitHub

上的项目

Answer 1

您需要在 images/Stack_Overflow_icon.svg 前加上 / i.g。 /images/Stack_Overflow_icon.svg。在您的代码中，您是否注意到 styles.css 正确加载，因为您在其前面加上 /.

您遇到此问题是因为文件 terms-condition.ejs 在文件夹中，而 home.ejs 不在文件夹中。

P.S。您应该始终将 node_modules 放在 .gitignore 文件中。

ejs 包含 header 但在某些页面中不加载图像

ejs includes header but in some page don't load image

ejs

node.js

express