如何将缓冲区数据转换为图像

时间:2021-07-15 08:44:31

标签: node.js reactjs api fetch buffer

我正在接收图像数据作为缓冲区数组我不知道如何将其转换为图像我尝试使用新缓冲区并将其转换为 base64 字符串但图像未显示

import React, { useEffect, useState } from 'react'
import axios from "axios";

const Home = () => {
    const [data, setData]= useState([]);
    
    useEffect(()=>{
        const url=`http://localhost:5000/`;
        const getData= async()=>{
            try {
               const res= await axios.get(url);
               setData(res.data)
            } catch (error) {
                console.log(`cannot fetch any data`);
            }
        }
        getData();
    },[])
    return (
        <div className="home">
            <h1 className="main-heading">Home Page</h1>
            {
                data.map((post, index)=>{
                  const {data}=post.postPic;
                 
                  const src=new Buffer.from(data).toString('base64');
                  console.log(src);
                    return(
                        <div className="postcard" key={index}>
                          <figure className="postcard-fig">
                            <img src={`data:${post.postPic.contentType} ${src}`} alt="post-pic" className="postcard-pic" />
                          </figure>
                            <div className="postcard-content">
                             <h2 className="sub-heading">{post.title}</h2>
                            <p className="para">{post.description}</p>
                          </div>
                    </div>
                    )
                })
            }
        </div>
    )
}

export default Home

0 个答案:

没有答案