As I work on my website, I had the brilliant idea of using a JavaScript HTTP header (via express) to avoid having to recreate a header and footer on every single file. And guess what? I successfully implemented it! But now I'm facing an issue with inserting a logo (jpeg) into the header and I can't figure out what's wrong...
Here is the code in my header.ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale">
<title>Document</title>
<link rel="stylesheet" href="css/Header.css">
</head>
<body>
<div id="Header">
<div id="upper-Header">
<img src="../public/img/upper-header.jpg"/>
</div>
<div id="lower-Header">
</div>
</div>
</body>
</html>And here is my app.js file:
const express = require('express');
const app = express();
const port = 3000;
app.use(express.static("./src/public"));
app.use("/css/", express.static(__dirname + "public/css/"));
app.use("/img/", express.static(__dirname + "public/img/"));
app.use("/js/", express.static(__dirname + "public/js/"));
app.set("views", "./src/views");
app.set("view engine", "ejs")
app.get("", (req, res) => {
res.render("Header", { text: "This is ejs"});
})
app.listen(port, () => {
console.log(`Listening for port: ${port}`);
});
node_modules
src
public
css
Header.css
Footer.css
img
upper-header.jpg
js
Footer.js
Header.js
views
Header.ejs
Footer.ejs
app.js
package-lock.json
package.json