어떻게 이미지를 보려면 ReactJS 에서 localhost

내가 사용하는 PHPmyAdmin 내 localhost,날개로 연기 드리프트 같이하지만 하는 기능과 백엔드 반응을 표시하는 웹 페이지에서 내가 만들어 테이블에 저장하는 ID 및 Blob,이후 blob 저장할 수 있는 이미지 데이터입니다. 내가 사용하는 국가 후크 및 렌더링의 각 항목에 표시되는 페이지만 페이지 렌더링,깨진 이미지가 표시됩니다. 나 console.로그()에서는 이미지 데이터와 그것으로 표시됩{type:'Buffer',데이터 배열(50639)}에는 콘솔 브라우저입니다.

에서 짧은,나를 검색하려고하는지 테이블에서 로컬 호스트에 표시 브라우저

React

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 로 데이터를 실제 이미지?