Почему не удается подгрузить картинки на страницу через Node.js (и Express)?

Question

[NoahTheLegend]

Запускаю скрипт сервера с терминала VSC

node startserver.js

, сервер запускается, отрабатывает все как надо, но только за исключением картинок. Любого формата. Через консоль разработчика показывает, что картинки загружаются клиентом, см. пикчу (выделенная и еще 1 - проблемные, по совместительству единственные на странице).
Экспериментировал без экспресса, с разными майм-типами подключаемыми в скрипте запуска, менял пути к этим картинкам на разные форматы - ничего не помогло

const http = require("http");
const fs = require("fs");
const path = require("path");

const express = require("express");
var app = express();
app.use(express.static('public'));

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, req.url === "/" ? "index.html" : req.url);
  const extname = path.extname(filePath);
  
  const contentType = {
    ".html": "text/html",
    ".js": "text/javascript",
    ".css": "text/css",
    ".ttf": "font/ttf",
    ".jpg": "image/jpeg",
    ".png": "image/png",
    ".gif": "image/gif",
  };

  fs.readFile(filePath, "utf8", (err, content) => {
    if (err) {
      res.writeHead(500, { "Content-Type": "text/plain" });
      res.end("Internal Server Error");
      console.error(err);
      return;
    }

    res.writeHead(200, { "Content-Type": contentType[extname] || "text/plain" });
    res.end(content);
  });
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

Comments

[Lynn «Кофеман»]

А зачем вообще делать http.createServer отдельно?

Или наоборот, зачем тут express если вы его так и не используете?

[NoahTheLegend]

szQocks, Выводится ошибка cannot GET /
(в консоли - Failed to load resource: the server responded with a status of 404 (Not Found))

[szQocks]

Lynn «Кофеман», незачем, исправил

NoahTheLegend рядом с файлом startserver.js - должна быть папка public в которой лежат файлы

[NoahTheLegend]

szQocks, Вы уверены, что

const contentType = {
    ".html": "text/html",
    ".js": "text/javascript",
    ".css": "text/css",
    ".ttf": "font/ttf",
    ".jpg": "image/jpeg",
    ".png": "image/png",
    ".gif": "image/gif",
  };

  fs.readFile(filePath, "utf8", (err, content) => {
    if (err) {
      res.writeHead(500, { "Content-Type": "text/plain" });
      res.end("Internal Server Error");
      console.error(err);
      return;
    }

    res.writeHead(200, { "Content-Type": contentType[extname] || "text/plain" });
    res.end(content);
  });

тут лишний? Сейчас я сталкиваюсь с той же проблемой, изза которой пришлось это добавлять -

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec

site.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.

[NoahTheLegend]

сейчас директория выглядит так . Пути к файлам указаны верно

[szQocks]

NoahTheLegend, если ты собираешься раздавать статику ( то есть картинки всякие из папки images ) то явно укажи это

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

[szQocks]

NoahTheLegend, ты сервер и клиент похоже соединил в едино и пытаешься сделать ssr, тут конечно лучше всё это через сборщик делать, тот же webpack, да и не советую на это тратить время

но если не ssr а просто отдавать приложение по запросу localhost:3000 , то просто отдай Index.html а дальше он уже сам подгрузит остальные файлы, так как скорее всего там в public находиться собранный проект