Estoy tratando de mostrar imágenes almacenadas en mongoDB a través de GridFS. No entiendo muy bien su implementación.

Aquí está la ruta para obtener la imagen:

 router.post("/image", async (req, res) => { let { filename } = req.body const image = await gfs.files.findOne({ filename: filename }); try{ const readStream = gfs.createReadStream(image.filename); readStream.on("error", function(err){ res.send("No image found with that title"); }); readStream.pipe(res); } catch (err) { res.status(500).json({error: err.message}); } });

Es un método de post porque no mostraré el nombre del archivo en la URL, planeo mostrar la imagen en un modal desde la interfaz de usuario del material. Al hacer clic en un botón, buscaré tres fotos diferentes.

Aquí está la solicitud, que toma el nombre de archivo de la foto:

 const getVerificationPicture = filename => { return new Promise(async (resolve, reject) => { try { const result = await axios.post( "http://localhost:5000/api/verifications/post/image", filename ); resolve(result); } catch (error) { reject(error); } }); };

Intenté guardar el resultado en variables y luego usar las variables para mostrarlas en una etiqueta de imagen, de la siguiente manera:

 const [images, setImages] = useState({}) const handleOpenModal = async (open, frontCardName, backCardName, faceName) => { setOpenModal(open); try { const frontID = await getVerificationPicture({ filename: frontCardName }); const backID = await getVerificationPicture({ filename: backCardName }); const faceID = await getVerificationPicture({ filename: faceName }); setImages({ ...images, frontImage: frontID.data, backImage: backID.data, faceImage: faceID.data, }); } catch (error) { console.error(error); } }; // in the modal component export default function RequestsModal({ open, setOpen, images }) { return ( <Dialog open={open} onClose={() => setOpen(false)}> ... <DialogContent> ... <img src={images.frontImage} /> ... </DialogContent> ... </Dialog> ); }

Sin embargo, las images eran de tipo cadena y, cuando se registraban, tenían un montón de caracteres. Cuando intento esto en cartero, obtengo la imagen, pero no se muestra aquí. ¿Cómo podría mostrarlos en la etiqueta img ?