如何查看图像在ReactJS从localhost

我用头文件作为我localhost，爱可信做后台职能和作出反应，以显示在网页上，我创建了一个表，商店一个ID和一个Blob，由于blob可以储存的图像数据。 我用状态挂钩并呈现每个项目可以在网页上显示的但当我渲染的网页，一个破碎的形象已经显示出来。 我试图控制台。日志()上，图像的数据，数据显示为{类型：'缓'、数据:Array(50639)}的控制台上的浏览器。

在短期，我试图找回的图像来自一个表在本机和显示器上的浏览器

反应

function ProjectCard() {

    const [projectCard, setProjectCard] = useState([]);

    const instance = axios.create( {
        baseURL: "http://localhost:3001/api",
    });

    useEffect(() => {
        instance.get("/getAvailableProjects").then((response) => {
            setProjectCard(response.data);
        });
    }, []);

    return (
        <div className="row g-4 py-4 border-bottom">
            {projectCard.map((val) => {
                return (
                    console.log(val.PROJECT_IMAGE) {/* displayed as {type: 'Buffer', data: Array(50639)} */}
                    <div className="col-lg-3 col-md-6 mb-2" key={val.PROJECT_ID}>
                        <img id="project-img" src={val.PROJECT_IMAGE} className="img-fluid" /> {/* BROKEN IMAGE */}
                    </div>
                );
            })}
       </div>
    )
};

export default ProjectCard;

服务器

app.get("/api/getAvailableProjects", (req, res) => {

    const sqlQuery = "SELECT *,  from projectdetail";

    db.query(sqlQuery, (_error, result) => {
        res.send(result);
    });
});

有没有办法转换这blob数据并入一个实际的图像?