Mi programa no puede detectar dónde se encuentran las imágenes y el css. Intenté agregar un '/' antes del "público", apuntando a ubicaciones específicas para obtener el css y la imagen y nada pareció funcionar para mí. Aquí está mi código:
JavaScript:
const express = require("express"); const request = require("request"); const bodyParser = require("body-parser"); const https = require("https"); const app = express(); app.use(express.static("public")); app.get("/", function(req, res) { res.sendFile(__dirname + "/signup.html") }) app.listen("3000", () => console.log("NEWSLETTER is running on port 3000."));HTML:
<main class="form-signin"> <form action="/" method="post"> <img class="mb-4" src="./public/images/roundups-v0@2x.png" alt="" width="120" height="100"> <h1 class="h3 mb-3 fw-normal">Please sign in</h1> <input type="text" class="form-control top" placeholder="First Name"> <input type="text" class="form-control middle" placeholder="Last Name"> <input type="email" class="form-control bottom" placeholder="Email"> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> <p class="mt-5 mb-3 text-muted">© 2017 – 2021</p> </form> </main> </body>Diseño del proyecto:
/public /images /roundups-v0@2x.png /styles /signup.cssDebe eliminar el public de la ruta del archivo:
Express busca los archivos relativos al directorio estático, por lo que el nombre del directorio estático no forma parte de la URL.
app.use(express.static('public'))Ahora, puede cargar los archivos que están en el directorio público:
http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http://localhost:3000/hello.htmlTambién puede consultar esta publicación: Express js directorio principal relativo estático