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

Question

I have images in my mongo atlas DB and I need to retrieve them from the server and display them dynamically to the client using React.

How do I get the image data from mongo DB using mongoose and display that image dynamically to the client side. (Note: I want to save the image and load it dynamically in another component.

The problem is the constructor function of getting the image, that is the code on the very top (exports.getImagePost) and it is also in the react client where the http is passing the id for the preview image (const GetPostVerse = ({ match }) => {) . Also I have tried to upload it to storage with NPM multer and it doesn't store the image in DB, it just shows it on the client end. Note: the image is saved properly in the DB

I have attempted to write a constructer that will be my function to get the image by id from the DB and render it on the client side, and I am not seeing the image:

Here is the code to get the image from server

 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 }); } }); };

Here are my routes

 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

Here is client side code the collects the data from user when user fills inputs and chooses 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;

this is the error i get, instead of dark gray I need the image to be there

Answer 1

here is the answer: I had to get image from object id:

Then i had to add an axios http request on the client side and pass function into useEffect()