Image issue while rendering custom landing page via Apollo Server

I am using apollo server, graphql, mongoDB in my nodeJS project. My project structure is like this:-

|
|
|-- app.js
|-- public
|     |
|    images
|     |
|     |-- api-screen.jpg
|
|-- config
|-- app

In app.js, I have this code:-

const server = new ApolloServer({
  schema: schemaWithMiddleware,
  context: ({ req, res }) => {
    return { req, res };
  },
  formatError: (err) => {
    // logger.info(err);
    return err;
  },
  plugins: [{
    async serverWillStart() {
      return {
         async renderLandingPage() {
            const html = `<!DOCTYPE html>
                          <html>
                            <head>
                            </head>
                            <body>
                              <img src="./public/images/api-screen.jpg" style="width:100%">
                            </body>
                          </html>`;
            return { html };
          }
        }
      }
    }
  ]
});

As you can see, I am rendering a custom landing page instead of showing the default graphql playground. The page is getting rendered correctly. However, the image isn't showing up. The image path is correct. I tested it with an index.html file and keeping it at same folder level like app.js. But when the page is getting rendered, the image doesn't show up properly.

How can I fix the issue with the image?