通过 mongoose 从 mongoDB 请求单个文档后，图像和 CSS 链接断开

Question

大家好发现我的问题。我正在联系这个社区，希望您能帮助解决我遇到的 Mongoose/EJS.

问题

在我解释这个问题之前先说一下。我是新手，所以这个问题对大多数人来说似乎很简单，而且解释得不好，对此深表歉意。所以问题是我试图通过猫鼬使用 mongoDB :id 来显示产品详细信息页面。

所以浏览器的数据 returns 正常，但 CSS 和图像链接已损坏。更令人沮丧的是，这些链接在所有其他页面上都运行良好！

在使用 Morgan 时，我发现问题出在它们的路径上。

用于从数据库检索产品的 /products/:id 路径也被添加到 CSS 和图像文件的路径之前，这不是本意，因此路径呈现不正确，因此链接断开。

我想我希望我已经包含了我认为完全理解问题所需的所有文件，但如果需要，我很乐意提供更多代码。

感谢您抽出宝贵时间阅读本文，我期待有更大的大脑来拯救。

干杯！

const express = require("express");
const app = express();
const Morgan = require("Morgan");
const mongoose = require("mongoose");
const Product = require("./models/product");

const dbURI =
"mongodb+srv://xxxxxx@xxxxx/test-db/retryWrites=true&w=majority";
mongoose
.connect(dbURI)
.then((result) => app.listen(3000),
console.log("connected to mongodb (products) & listening for requests on port: 3000"))
.catch((err) => console.log(err));

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

// middleware and static files
app.use(express.static(__dirname + "/public"));
app.use(Morgan("dev"));
app.use(express.urlencoded({ extended: true })); 


=======================================================================

**// details.ejs**

<%- include('./partials/head.ejs') %> 
<body>
<main class="body-main">
<!-- ==========   Header =============->
<!-- <%- include('./partials/navbar.ejs') %> →
<div class="promotion-panel-lower">
<h1><%=product.title %></h1>
           <div class="promo-grid-item">
            <div class="product-name">
                <%=product.title %>
            </div>
 <img src=./images/<%=product.img %>  alt=<%=product.title %> class="photo" />
 <h4 class="prices-from">prices from:<%=product.price %></h4>
        </div>
    </div>
    <!-- =========== footer ============ -->
    <%- include('./partials/footer.ejs') %>

=======================================================================

// DOC DETAIL REQUEST

app.get("/products/:id", (req, res) => {
const id = req.params.id;
Product.findById(id)
 .then((result) => {
 res.render("details", { title: "Details", product: result });
})
.catch((err) => {
throw err;
}); });

=======================================================================
// Terminal

// it should look like this 
GET /products/62004ee85f4bcd160b832540 304 282.060 ms - -
GET /css/css-reset.css 404 7.488 ms - 17548
GET /css/style.css 404 6.081 ms - 17548
GET /images/backpack2.jpg 404 7.840 ms - 17548

// BUT here’s the result. i.e. /products/ included to my PUBLIC path CSS and images > 
rendering those links obsolete

GET /products/62004ee85f4bcd160b832540 304 282.060 ms - -
GET /products/css/css-reset.css 404 7.488 ms - 17548
GET /products/css/style.css 404 6.081 ms - 17548
GET /products/images/backpack2.jpg 404 7.840 ms - 17548
=======================================================================

Answer 1

我没有详细查看你所有的代码。

对于初学者，您是否尝试过删除 <img src=./images/<%=product.img %> 中斜杠前面的点？试试这个：<img src=/images/<%=product.img %>.

你的 images 文件夹在我看来是在你的 public 文件夹的根目录中，写 / 而不是 ./ 更有意义。

通过 mongoose 从 mongoDB 请求单个文档后，图像和 CSS 链接断开

Image and CSS links broken after requesting a single doc from mongoDB via mongoose

mongodb

mongoose

ejs

filepath

broken-links