Accessing static images using Express, EJS and Tailwind

Question

I have a very simple app set up which displays a single page (landing.ejs) using express. I am using Tailwind for the css, and would like to set the background image to my webpage as a file I'm holding in my public/images folder. I'm very new to web development so probably doing something stupid.

I've tried all the ways suggested in the Tailwind docs such as using

bg-[url('/images/myImage.jpg')] 

and by extending backgroudImage in the config file using

    extend: {
      backgroundImage: {
        'charizard': "url('images/charizard.png')",
        'blastoise': "url('public/images/blastoise.png')",
      }
    },

and then trying to access it in my EJS file using bg-charizard etc..

However, I can't seem to get the images rendering on my webpage. I have a feeling this is something to do with express.static.

my app.js code:

const express = require('express');
const ejs = require('ejs');
const axios = require('axios');
const path = require('path');
const PORT = process.env.PORT || 3000;

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// design file
app.use(express.static(path.join(__dirname,"public")));

app.set("view engine", "ejs");

// routers
app.get("/", (req, res) => {
  res.render("index");
});

// server listening
app.listen(PORT, () => {
  console.log(`The app start on http://localhost:${PORT}`);
});

Image attached of my project setup

Project Setup

I have no issue accessing the files using the usual , my issue is just with setting a background image using tailwind.

Thanks in advance.

Tried to set a background image for the webpage, won't load it at all unless using