Images not rendering on client side

I've a problem I want to render images from my server to my client app, however it is not rendering, and if I try to access the url directly from the browser I'm getting a white/blank page, I don't know if the error is in serving static files, I'm using ExpressJs and React. Here's the code below

const corsOption = {
  origin: "http://localhost:5173",
  optionSuccessStatus: 200,
};

app.use(cors(corsOption));

app.use("/images", express.static(path.resolve(__dirname, "images")));

Here's my multer configuration file

import multer from "multer";
import path from "path";

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "images");
  },
  filename: function (req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    );
  },
});

const fileFilter = (req, file, cb) => {
  const filetypes = /jpg|jpeg|png|mp4|mov|avi/;
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = filetypes.test(file.mimetype);

  if (mimetype && extname) {
    return cb(null, true);
  } else {
    cb(new Error("Only .jpg, .jpeg, .png, .mp4, and .avi files are allowed"));
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: {
    fileSize: 1024 * 1024 * 5,
  },
});

export default upload;

This is the response I get when i send a get request using localhost:5173/images/profilePicture-59745.jpeg

<!doctype html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx?t=1717276169250"></script>
  </body>
</html>

It looks like content type is text/html, can anyone help me fix this issue?

Solution

I believe http://localhost:5173 is the URL of the client app, as you declared it in the CORS middleware. So, the response you are getting is from some frontend framework and has nothing to do with the server.

To access a static file from the server, you actually need to access it using the server's URL. Let's assume your webserver is listening on port 3000, then your request should be http://localhost:3000/images/<IMAGE_NAME>, and make sure the image name matches the one returned from the filename callback.

If the client application is hosted on the same backend server, then you should make sure that the static middleware comes before the client application middleware.