反应来自服务器的显示图像

时间:2020-09-26 13:58:32

标签: node.js reactjs image axios

正在尝试使用MERN堆栈构建社交网络。

我有服务器,可以使用将图片上传到MongoDB

router.post("/users/me/avatar",auth,upload.single("avatar"),async (req, res) => {
  const buffer = await sharp(req.file.buffer)
     .resize({ height: 250, width: 250 })
     .jpeg()
     .toBuffer();
  req.user.avatar = buffer;
  await req.user.save();
  res.send();
},
  (error, req, res, next) => {
    res.status(400).send({ error: error.message });
  }
);

并获取img:

router.get("/getmyprofilepic", auth, async (req, res) => {
try {
   const user = req.user;
   if (!user | !user.avatar) {
      throw new Error();
   }
   res.set("Content-type", "image/png");
   res.send(user.avatar);
} catch (e) {
    res.status(404).send;
}});

我正在使用axios从服务器获取图片:

getMyUserAvatar() {
   return axios
    .get(API_URL + "getmyprofilepic", { headers: authHeader() })
    .then((res) => res.data);
}

但是我无法更改状态或显示图片:

Userservice.getMyUserAvatar().then((avatar)=>{
    setState((prev)=>{return{...prev,avatar}})
})

我如何显示图像?或将其保存到状态?

0 个答案:

没有答案