logic error in my routing function in node js

so I have a pretty common function for routing in my node project. But I’m dealing with a logic error I can’t wrap my head around. As you see I want to render my HTML server side but when I create and serve it to the browser, the image links were broken. so I fix it with this condition and now my images are showing.

else if (parsedURL.pathname.startsWith("/public/")) {
    console.log("image");
    let imagePath = __dirname + parsedURL.pathname;
    fs.readFile(imagePath, (err, content) => {
      if (err) {
        res.writeHead(404);
        res.end("Image not found!");
      } else {
        let mimeType = mimeTypes.lookup(imagePath);
        res.writeHead(200, { "Content-Type": mimeType });
        res.end(content);
      }
    });

but right now It seems like I can’t respond to the queries because whatever I do I can’t get inside the query block.

else if (parsedURL.query.id) {
    console.log("id");

how can I fix this problem and refactor my code?
(excuse me for my bad English)

full code:

// Create A Server That Can send back ststic files
const http = require("http");
const url = require("url");
const fs = require("fs");
const mimeTypes = require("mime-types");
const { lookup } = require("dns");

const database = fs.readFileSync(`${__dirname}/database/movies.json`, "utf-8");
const cardTemplate = fs.readFileSync(
  `${__dirname}/templates/movieCard.html`,
  "utf-8"
);
const mainPageTemp = fs.readFileSync(
  `${__dirname}/templates/mainPage.html`,
  "utf-8"
);

// Creating our server
const server = http.createServer((req, res) => {

  //////////////////////////////////////////////////////
  // THIS IS A SERVER SIDE RENDERING SITE
  //////////////////////////////////////////////////////

  let parsedURL = url.parse(req.url, true);
  //   console.log(parsedURL.query.id);
  if (parsedURL.pathname === "/" || parsedURL.pathname === "/main") {
    console.log("main");
    res.setHeader("X-Content-Type-Options", "nosniff");
    res.writeHead(200, {
      "Content-type": "text/html",
    });

    // 1. GET the 3 most recent posts from the database
    const latestPosts = JSON.parse(database).slice(0, 3);
    // 2. Get the card html template and generate 3 template ane save them inside a variable
    const cardsHtml = latestPosts
      .map((el) => {
        return cardTemplateReplacor(cardTemplate, el, parsedURL);
      })
      .join("n");
    // console.log(cardsHtml);
    // 3. put them inside the mainpage.html template and send it to the enduser
    const output = mainPageTemp.replace(/{%POSTS%}/g, cardsHtml);
    res.end(output);
  } else if (parsedURL.query.id) {
    console.log("id");
  } else if (parsedURL.pathname.startsWith("/public/")) {
    console.log("image");
    let imagePath = __dirname + parsedURL.pathname;
    fs.readFile(imagePath, (err, content) => {
      if (err) {
        res.writeHead(404);
        res.end("Image not found!");
      } else {
        let mimeType = mimeTypes.lookup(imagePath);
        res.writeHead(200, { "Content-Type": mimeType });
        res.end(content);
      }
    });
  }
});

const cardTemplateReplacor = function (template, card, url) {
  let imageLink = `/public/${card.cover}`;
  let moviePageLink = `${url.pathname}?id=${card.id}`;
  let output = template.replace(/{%IMAGELINK%}/g, imageLink);
  output = output.replace(/{%MOVIENAME%}/g, card.title);
  output = output.replace(/{%MOVIELINK%}/g, moviePageLink);
  return output;
};

server.listen(8080, () => {
  console.log("We are listening to request sended to the port 8080");
});

I will have a lot of images on my pages, so I need a way to route my images in all my HTML pages. I tried tweaking my conditions but I haven’t gotten any results so far.