С сервера приходит некорректный url и картинка не отрисовывается

Question

Пишу программу, которая должна загружать на сервер пользовательские данные в том числе и его фото. С клиента (написан на React) запрос уходит корректно. На сервере происходит обработка с помощью multer. Код ниже

const multer = require("multer");

const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, "static/user_photo/");
  },
  filename(req, file, cb) {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage });

module.exports = upload;

Далее, всё по стандарту. Есть контроллер, который берёт данные с клиента, заносит их в бд и отдаёт клиенту результат.

class UserController {
  
  async createUser(req, res) {
    let { surname, name, patronymic, role, login, password, email, photo } =
      req.body;
    let newUser = await users.create({
      surname,
      name,
      patronymic,
      role,
      login,
      password,
      email,
      photo: !req.file ? "" : req.file.path,
      departmentId: 1,
    });
    return res.json(newUser);
  }
}

module.exports = new UserController();

Путь, по которому отрабатывает endpoint createUser просматривается так: Вот код middleware главного файла сервера

app.use(cors());
app.use(express.json({ extendet: true }));
app.use(express.static(__dirname + "/static"));
app.use("/", router);

Далее идёт код главного роута для всех контроллеров, который экспортируется и используется в главном файле.

const Router = require("express");
const router = new Router();
const userRouter = require("./userRouter");

router.use("/adminpanel", userRouter);
module.exports = router;

Ну и затем сам userRouter.

const Router = require("express");
const router = new Router();
const userController = require("../controllers/userController");
const upload = require("../middleware/upload");

router.get("/user", userController.getUsers); // Получить
router.post("/user", upload.single("photo"), userController.createUser); // Создать
router.put("/user", userController.updateUser); // Изменить
router.delete("/user", userController.deleteUser); // Удалить

module.exports = router;

Всё проходит отлично. Фото вместе с другими данными прилетает на сервер и заносится в папку static/user_photo как и задумывалось. В бд заносится примерно такой url static\user_photo\20191202_142244.jpg. Но, при возврате на клиент возникает вот такая ошибка (GET http://localhost:3000/adminpanel/static/user_photo/20191202_142244.jpg 404 (Not Found)) и картинка не отображается. Где я ошибся, подскажите пожалуйста. Код отрисовки данных, пришедших с сервера выглядит так:

{users.map(item => { 
            console.log(item);
            return (
            <tr key={item.userId} data-code={item.userId}>
              <td className="break-word-field">{item.login}</td>
              <td className="break-word-field">{item.email}</td>
              <td className="break-word-field">{item.role}</td>
              <td className="jump-word-field">{`${item.surname} ${item.name} ${item.patronymic}`}</td>
              <td className="photo-field"><img src={!item.photo ? defaultImg : item.photo} alt="Фото"/></td>
              <td className="operation-field">
                <button className="btn btn-success edit-btn" title="Изменить"
                  onClick={(e) => editUserBtnClickHandler(e)}
                ><i className="icon icon-edit"></i></button>
                <button className="btn btn-error delete-btn" title="Удалить"
                  onClick={(e) => deleteUserBtnClickHandler(e)}
                ><i className="icon icon-delete"></i></button>
              </td>
            </tr>
          )})}

БЛОГ НА HUSL

С сервера приходит некорректный url и картинка не отрисовывается

Ответы (0 шт):