来自 Mongodb 的照片未在前端 React 中呈现

照片未在前端 React 中呈现"/>

来自 Mongodb 的照片未在前端 React 中呈现

我尝试渲染一个 mongodb 集合并在每个元素中显示照片。尽管元素在控制台中正确显示，但照片显示不起作用。

    import React, { useState, useEffect } from "react";
    import fetchData from "../helpers/fetchData";
    import { Buffer } from "buffer";
    
    const TestImage = () => { 
        const [images, setImages] = useState([]); 
    
    useEffect(() => { 
        async function renderData () { 
             const data = await fetchData("http://localhost:3000/upload"); 
             await setImages(data.images); 
             console.log(data.images); 
        }
    
        renderData(); 
    },  []) 
    
    return(
        <section>
            <p>Hello from testing Hell</p>
            { images.map(image => { 
                const base64Image = Buffer.from(image.image.data.data).toString("base64"); 
                const src = `data:image/jpeg;base64,${base64Image}`; 
                console.log(src); 
    
                return ( 
                    <img src= {`data:image/jpeg;base64,${base64Image}` } key = {image._id} alt="X" />
                )
            })}
        </section>
    )
    }; 
    
    export default TestImage

    EDIT: this is the console.log 
    /*
    [{"image":
       {"data":
          {"type":"Buffer","data":    [84,104,111,109,97,115,32,109,97,110,115,105,111,110,32,103,111,110,101,46 ,106,112,101,103]},
    "contentType":"image/jpeg"},
       "_id":"64594abf239cbbc92a7da181",
       "name":"textimage","__v":0},
    
    {"image":
       {"data":
          {"type":"Buffer","data":[106,112,101,103]},"contentType":"image/jpeg"},
       "_id":"645bea25c94b1d0524492bb3",
       "name":"ziua2","__v":0}]
    
    */ 

控制台显示的元素与mongodb集合中的文档相同。我真的不知道可能是什么问题。感谢您的帮助。