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

Hello everyone finding my question. I am reaching out to this community in the hope that you can help with a problem I am experiencing with Mongoose/EJS.

Just like to say before I explain the issue. I am a newbie so the question may seem simple to most and poorly explained, so apologies for that. So the problem is that I am trying to display a product details page by using the mongoDB :id via mongoose.

So the data returns to the browser ok but the CSS and IMAGE links are broken. To makes things even more frustrating, the links works perfectly well on all other pages!

On using Morgan I can see that the problem is with their Paths.

The /products/:id path used for the product retrieval from DB is also being prepended to the paths of the CSS and image files, which IS not the intention, and so rendering the paths incorrectly, hence broken links.

I think I hope I have included all the files that I think are required to understand the problem fully, but happy to provide further code if req'd.

Thank you for taking the time to read this and I look forward to a bigger brain coming to the rescue.

Cheers!

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 >
<!-- ==========   Header =============->
<!-- <%- include('./partials/navbar.ejs') %> →
<div >
<h1><%=product.title %></h1>
           <div >
            <div >
                <%=product.title %>
            </div>
 <img src=./images/<%=product.img %>  alt=<%=product.title %>  />
 <h4 >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
=======================================================================

CodePudding user response：

I haven't looked at all your code in detail.

For starters, have you tried removing the dot in front of the slash in <img src=./images/<%=product.img %>? Try this: <img src=/images/<%=product.img %>.

Your images folder seems to me to be in the root of your public folder and it would make sense to write / rather than ./.