如何使用 Node.js 显示来自 MongoDB 的图像？

Question

我的 mongo atlas DB 中有图像，我需要从服务器检索它们并使用 React 将它们动态显示给客户端。

如何使用 mongoose 从 mongo DB 获取图像数据并将该图像动态显示到客户端。 （注意：我想保存图像并在另一个组件中动态加载它。

问题是获取图片的构造函数，也就是最上面的代码(exports.getImagePost)，也是在react客户端里面http 正在传递预览图像的 id (const GetPostVerse = ({ match }) => {)。此外，我尝试使用 NPM multer 将其上传到存储，它不会将图像存储在数据库中，它只是在客户端显示它。注意：图像已正确保存在数据库中

我试图编写一个构造函数，作为我的函数，通过 id 从数据库中获取图像并在客户端呈现它，但我没有看到图像：

这是从服务器获取图像的代码

exports.getImagePost = async (req, res) => {
  // get id from URL by using req.params
  let ImageID = req.params.id;
  // we use mongodb's findById() functionality here
  await VImage.findByOne({ id: ImageID }, (err, data) => {
    if (err) {
      res.status(500).json({
        message: "Something went wrong, please try again later.",
      });
    } else {
      console.log(image);
      res.status(200).json({
        message: "Image found",
        data,
        image
      });
    }
  });
};

这是我的路线

    router.post('/postverse', ivpostController.imagePost);//post image
    router.post('/createpostverse', ivpostController.createBibleVerse); //post bible verse
    router.get('/getimage/:id', ivpostController.getImagePost)//get image 
    router.get('/getverse/:id', ivpostController.getBibleVersePost); //get bible verse by id

这是客户端代码，当用户填写输入并选择 bk-img 时从用户那里收集数据

import React, { useState, useEffect } from "react";
import {useHistory} from "react-router-dom";
import { isExpired, decodeToken } from "react-jwt";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
// import Button from "react-bootstrap/Button";
// import "./postverse.css";
import axios from "axios";

const GetPostVerse = ({ match }) => {
  const [body, setBody] = useState("");
  const [title, setTitle] = useState("");
  const history = useHistory();
  // const [id, setId] = useState("");
  const [imagePreview, setImagePreview] = useState(
    `http://localhost:5000/getimage/${match.params.id}`
  );

  const loadData = async () => {
    try {
      let res = await axios.get(
        `http://localhost:5000/getverse/${match.params.id}`
      );
      setTitle(res.data.data.title);
      // console.log(res.data);
      // console.log(res.data.data.title);
      // console.log(match.params.id);
      setBody(res.data.data.body);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    // console.log("use effect working!");
    if (!window.localStorage.getItem("token")) {
      //redirect to login
      console.log("redirect to login");
      history.push("/");
    }
    if (window.localStorage.getItem("token")) { 
      const isMyTokenExpired = isExpired(window.localStorage.getItem("token"));
      console.log(isMyTokenExpired);

      if(isMyTokenExpired) {
        console.log("redirect to login");
        history.push("/");
      }

      const myDecodedToken = decodeToken(window.localStorage.getItem("token"));
      console.log(myDecodedToken);
    }
    loadData()
  });
// },[]);

  return (
    <div className="getpostverse">
      <Container className="mt-5 ml-auto mr-auto">
        <h1 className="text-center">
          ShareVerse
          <span className="text-success"> Saved Posts</span>
        </h1>

        <div>saved image</div>
        <div>
          <div className="shadow p-3 mb-5 bg-white rounded">
            <Card className="bg-dark shadow text-white">
              <Card.Img src={imagePreview} alt="Card image" />
              <Card.ImgOverlay>
                <Card.Title className="text-center mt-5">
                  <h1 className="text-warning">{title}</h1>
                </Card.Title>
                <Card.Title className="text-center mt-5">
                  <h3 className="text-warning">{body}</h3>
                </Card.Title>
              </Card.ImgOverlay>
            </Card>
          </div>
        </div>
      </Container>
    </div>
  );
};

// test link: http://localhost:3000/getverse/6021ef044a42be4388eee4ed

export default GetPostVerse;

这是我得到的错误，我需要图像而不是深灰色

Answer 1

这是答案：我必须从对象 id 获取图像：

然后我必须在客户端添加一个 axios http 请求并将函数传递给 useEffect()