htmlcssexpressbootstrap-4ejs

The images are not showing up. I'm using express, EJS and bootstrap

I'm making a website and for some reason the images are not showing up on the browser. The ALT TEXT is appearing correctly but the images are not. Images have been placed in public/images...

The code is as:

<section03>
          <div class="container-fluid">
            <div class="row">


              <div class="col-4">
                <img src="public\images\untitled.png" alt="an image">
                <a href="#" style="text-align: center;">SOME TEXT</a>
              </div>


            </div>
          </div>
        </section03>
Solution

  • You need to set static folder path first for the express app in order to access static files using ejs or html. Here we will consider public folder as a static folder for our app.

    Just copy the below line to the entrypoint of your app & then replace "./public" with your public folder path.

    app.use(express.static("./public"));

    Complete Example Code

    const express = require("express");
const app = express();
app.use(express.static("./public"));

app.get("/", (req,res) => {
    return res.send("welcome")
})

/* Start Server */
app.listen(5000, () => {
    logger.info(`Success, service running on port 5000.`);
})

    Also,

    <img src="public\images\untitled.png" alt="an image"> will be replaced with <img src="/images/untitled.png" alt="an image">