正确的图像路径，在Express React(Create-React-App)中正确显示图像

Question

我希望这个问题的答案可能很简单。

因此，我正在创建一个基于mongodb，node，express，react等的应用程序，但是我无法弄清楚如何在上传后正确设置和显示用户的头像。

我有一个可用的API端点，用于上传Avatar，当用请求打击时，它会成功上传图像。(借助Multer Mifdware帮助(我还正确地将其存储在MongoDB中。问题是目前看起来像这样，我很确定它不应该：

在redux状态：

avatar(pin): "C:UsersKubaDesktopmern_projectclientpublicavatarsuploadsprofileAvatar-1558374898723.jpeg"

因此，上载图像的路径应该如何看起来像这样，因此我可以在React中成功显示它(如果有任何帮助，请使用Create-React-App构建(。我应该在哪个文件夹中存储上传的图像？

这是我默认的阿凡达路径，它的工作原理非常好，但是它只是由React组件中的导入实现。

avatar(pin): "/static/media/template-avatar2.173d1842.svg"

项目结构图像

客户端是前端，路由/api/profile.js

中的API端点

我感谢任何帮助。

下面是路线

  router.post(
  "/avatar",
  passport.authenticate("jwt", { session: false }),
  upload.single("avatar"),
  (req, res) => {
    const errors = {};
// Path to the avatar is in req.file.path
if (!req.file.path) {
  errors.avatar = "Wrong file format";
  return res.status(404).json(errors);
}
const avatarPath = req.file.path;
Profile.findOne({ user: req.user.id })
  .then(profile => {
    if (profile) {
      Profile.findOneAndUpdate(
        { user: req.user.id },
        { $set: { avatar: avatarPath } },
        { new: true }
      )
        .then(profile => {
          res.json(profile);
        })
        .catch(err => res.json(err));
    } else {
      errors.noprofile = "Couldn't find the profile";
      res.status(404).json(errors);
    }
    errors.noprofile = "Couldn't find the profile";
  })
  .catch(err => res.status(404).json(errors));

}(;

multer设置

const multer = require("multer");
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./client/src/img/uploads/avatars");
  },
  filename: (req, file, cb) => {
    cb(
      null,
      file.fieldname + "-" + file.filename + "." + file.mimetype.slice(6)
    );
  }
});
const fileFilter = (req, file, cb) => {
  if (file.mimetype === "image/jpeg" || file.mimetype === "image/png")
    cb(null, true);
  else {
    // reject a file
    let errors = {};
    cb(
      new Error(
        (errors.avatar = "Wrong filetype, only png and jpg types are eligible")
      ),
      false
    );
  }
};
// Upload avatar middleware
const upload = multer({
  storage,
  limits: {
    fileSize: 1024 * 1024 * 2
  },
  fileFilter
});

编辑：好的，我将Multer的路径更改为相对的路径，现在看起来仍然不起作用。

avatar(pin): "clientsrcimguploadsavatarsavatar-undefined.png"

Answer 1

最终解决了这个问题，所以我要发布答案，以防有人有相同的问题。

解决方案实际上有点愚蠢，但有效...

显然，为了使图像在创建反应应用中显示它们必须存储在"客户端/public"中，这就是根目录启动的地方。

所以我将Multer中的目标目录更改为：

"./client/public/images/uploads/avatars"

，由于根目录始于公共，因此在我的情况下，路径必须以"/images/..."开头。因此，在将其存储在数据库中之前，我只是剪切了前15个字符 - 整个" ./client/public"。