Comment afficher une image dans ReactJS à partir de localhost

J'ai utilisé PHPmyAdmin que mon localhost, Axios faire backend fonctions et de réagir à afficher sur la page web, j'ai créé une table qui stocke un IDENTIFIANT et d'un Blob, depuis blob peut stocker des données d'image. J'ai utilisé de l'état de crochets et de rendre chacun de l'élément à afficher sur la page, mais quand je le rendu de la page, une image est affichée. J'ai essayé de la console.log() sur les données de l'image et de l'afficher comme {type: 'Tampon', data: Array(50639)} sur la console du navigateur.

En bref, je suis en train d'essayer de récupérer une image à partir d'une table dans le localhost et de l'afficher sur le navigateur

Réagir

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;

Serveur

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

    const sqlQuery = "SELECT *,  from projectdetail";

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

Est-il un moyen de convertir ces données blob dans une image réelle?