I am writing an app in express without any view engine like ejs. Here is my Html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Demo Market</title>
</head>
<body>
<div>
<nav style="justify-content: center" class="navbar navbar-dark bg-primary">
<span class="navbar-brand mb-0 h1">Demo Marketplace</span>
</nav>
<div style="margin: 1em;" class="row">
<div class="col-md-3 wrapper">
<div class="card" style="width: 18rem;">
<div class="image-wrapper">
<img src="./images/music.jpg" class="card-img-top img" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">Echo Dot</h5>
<p class="card-text">Smart Speaker with Alex support.<br/>
Available for pre-order.
<br/>
$28.99
</p>
<button id="like-btn" class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
Like
</button>
<button id="quote-btn" style="display: none" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Ask For A Quote
</button>
</div>
</div>
</div>
<div class="col-md-3 wrapper">
<div class="card" style="width: 18rem;">
<div class="image-wrapper">
<img src="images/music.jpg" class="card-img-top img" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">Echo Dot</h5>
<p class="card-text">Smart Speaker with Alex support.<br/>
Available for pre-order.
<br/>
$28.99
</p>
<button id="like-btn2" class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
Like
</button>
<button id="quote-btn2" style="display: none" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Ask For A Quote
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Please Fill the Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="contact-form" method="POST">
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label>First Name</label>
<input name="first_name" type="text" class="form-control" id="first_name" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label>Last Name</label>
<input name="last_name" type="text" class="form-control" id="last_name" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label>Leave a Comment!</label>
<input name="comment" type="text" class="form-control" id="comment" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#like-btn").click(function(){
$("#quote-btn").show();
});
});
$(document).ready(function(){
$("#like-btn2").click(function(){
$("#quote-btn2").show();
});
});
$(document).ready(function(){
$("#contact-form").submit(function(e){
const first_name = document.getElementById("first_name").value;
const last_name = document.getElementById("last_name").value;
const email = document.getElementById("email").value;
const comment = document.getElementById("comment").value;
})
});
</script>
</body>
</html>
Here is my backend code:
const express = require("express");
const app = express();
const path = require("path");
app.use(express.urlencoded({extended: false}));
app.use(express.json());
app.get("/", (req,res) => {
res.sendFile(path.join(__dirname,"view","index.html"))
})
const PORT = 3000;
app.listen(PORT, () => console.log(`server is running at ${PORT}`));
The image is not showing up and I get the following error message in the console:
Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:18 GET http://localhost:3000/images/music.jpg 404 (Not Found)
question from:
https://stackoverflow.com/questions/65938283/express-app-not-loading-images-and-stylesheets 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
