将缓冲区数组转换为图像

Question

我在快速服务器上有以下代码，用于读取图像并通过 api

将其发送给客户端

router.get("/file",async (req,res)=>{
    const objImg = {img:null}
    const result = await SELECT("...");
    if(result.length>0){        
        var bitMap= fs.readFileSync(`./src/logosClient/${result.nombImg}`)        
        objImg.img=new Buffer.from(bitMap,"base64")
    }
    res.json(objImg)
})

api数据到达如下

数据：{类型："Buffer"，数据：[137、80、78、71、13、10、26、10、0、0、0、13、73、72、68、82 , 0, 0, 0, 192, 0, 0, 0, 46, 8, 6……]}

在我的 ReactJs 客户端中，我有以下代码来接收它

    import React, {useEffect, useState} from 'react';
    import muestra from '../../../../resources/images/muestra.png'
    
    const Index = () => {
    const [previewImg, setPreviewImg] = useState(null) 
    
    useEffect(()=>{        
        RunApi("/generales/file","GET",null,null).then(result=>{
            if(result.img){
                setPreviewImg("data:image/png;base64," + result.img.data)
            }
        }).catch(error=>{
            addToast("error","Error",error)
        })
    },[])
    
    return(
      <img src={previewImg?previewImg:muestra} className="align-self-center mr-3" alt="..."/>
    )
    
}

我看不到图像，但它也没有生成任何错误消息

Answer 1

尝试将您的图像转换为 base64 字符串，例如

objImg.img = new Buffer.from(bitMap).toString("base64")

然后把你的状态设置成

setPreviewImg("data:image/png;base64," + result.img)

将缓冲区数组转换为图像

Convert a Buffer Array into an image

javascript

buffer

node.js

reactjs