After using express static function, Css and image still won't load up

March 25, 2022

My program can’t pick up on where the images and the css are located. tried adding a ‘/’ before the "public", pointing to specific locations to get the css and image and nothing seemed to work for me. Here’s my code:

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">&copy; 2017 – 2021</p>
        </form>
    </main>
</body>

Project layout:

/public
    /images
        /roundups-v0@2x.png
    /styles
        /signup.css

>Solution :

You need to remove the public from the filepath:

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

Documentation

app.use(express.static('public'))

Now, you can load the files that are in the public directory:

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.html

You might also consult this post: Express js static relative parent directory