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

Question

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

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

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

我试图编写一个构造函数，它将是我的 function 以从数据库中通过 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

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

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