In my ejs file (result1.ejs), I can’t link with css file or any other image and everything.

Here is the folder structure (I removed some of the files that is not necessary to the question)

Here is the server.js (I removed some of the uncessary codes that aren’t related to the question)

const express = require("express");
const app = express();
const puppeteer = require("puppeteer");
const fs = require("fs");
const path = require("path");
const { render } = require("ejs");

// other importing code

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

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

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

app.post("/scrape", async (req, res) => {
  const reveiwLink = req.body.review_link;

  try {
    // puppeteer extracting the data code
    const renderedHTML = await new Promise((resolve, reject) => {
      res.render(
        "card",
        {
          data: {
        data1,
        data2
          },
        },
        (err, html) => {
          if (err) {
            reject(err);
          } else {
            resolve(html);
          }
        }
      );
    });

    res.render("result", {
      data: {
        renderedHTML,
      },
    });
    await browser.close();
  } catch (err) {
    console.error(err);
    res
      .status(500)
      .json({ error: "An error occurred while fetching the review" });
  }
});

app.post("/download", async (req, res) => {
  const renderedHTML = req.body.renderedHTML; 
  try {
    const browser = await puppeteer.launch({
      args: [
        "--disable-setuid-sandbox",
        "--no-sandbox",
        "--single-process",
        "--no-zygote",
      ],
      executablePath:
        process.env.NODE_ENV === "production"
          ? process.env.PUPPETEER_EXECUTABLE_PATH
          : puppeteer.executablePath(),
      headless: true,
      defaultViewport: null,
    });

    const page = await browser.newPage();
    await page.setContent(renderedHTML);

    // Capture the screenshot of the desired element
    const element = await page.$("#htmlContent");
    const screenshotBuffer = await element.screenshot();

    await browser.close();

    // Set the appropriate headers for image download
    res.setHeader("Content-Disposition", "attachment; filename=card.png");
    res.setHeader("Content-Type", "image/png");

    // Send the screenshot buffer as a response
    res.send(screenshotBuffer);
  } catch (err) {
    console.error(err);
    res
      .status(500)
      .json({ error: "An error occurred while generating the screenshot" });
  }
});

In the result.ejs

        <form action="/download" method="post">
            <input type="hidden" name="renderedHTML" value="<%= locals.data.renderedHTML %>">
            <button type="submit">Download</button>
        </form>

In the card.ejs
I tried to link the card.css and root.css files by writing like this

<link rel="stylesheet" href="/assets/root.css">
<link rel="stylesheet" href="/assets/card.css">

but the styles don’t work.

I can link to root.css in the result.ejs by writing like this though.

<link rel="stylesheet" href="/assets/root.css">

It’s not just css files not cannot be linked in the card.ejs, I have tried with images too,
I put an image (abc.jpg) in every folder and also in the root-folder
not then in the card.ejs, I have tried to link the image by writing like this

<img src="abc.jpg">

and still the image doesn’t show up.