base64 image doesn't display in reactjs

Question

I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work I am trying to display base64 in react js but it doesn't work

import React, { useContext, useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom';
import { userContext } from '../../App';
import './Profile.css';
let k=1;

const Profile = () => {
    const[data,setData]=useState({});
    const[report,setReport]=useState({});
    const[login,setLogin]= useContext(userContext);
      if(data.length>0){
        sessionStorage.setItem('login', true)
        setLogin(1)
    }
    useEffect(()=>{
     
        fetch('http://localhost:5000/Singup/Profile?username='+sessionStorage.getItem('username'),{
          method: 'GET',
          headers:{
            'Content-Type' : 'application/json',
            "authorization" : `Bearer ${sessionStorage.getItem("Token")}`

          }
        })
        .then(res=>res.json())
        .then(res=>setData(res))
    },[])
  
   
    useEffect(()=>{
     
      fetch('http://localhost:5000/Upload/ReportPost?username='+sessionStorage.getItem('username'),{
        method: 'GET'
      })
      .then(res=>res.json())
      .then(res=>
     setReport(res) 
      )
  },[])
  useEffect(()=>{
    report&& console.log(report)
  })
    return (
        
       { data[0] && 
        
          
            
              
                
                
                  {data[0].username && data[0].username}
                  A family mamber of bongocare
                  {data[0].address&& data[0].address}
                  
                  
                
              
            
          
          
            
              
                Name
                 {data[0].name && data[0].name}
              
              
                Email
                  {data[0].email && data[0].email}
              
              
                Phone
                   {data[0].phone && data[0].phone}
              
              
                Instagram
                 {data[0].address && data[0].address}
              
              
              
                
              Edit Profile   
                
              
              
              
              
                
              
                
                
                 
                
              
              
              
          
        
        
        
    { report.map (data=>( 
   )  )}
        
        
        
      SN
      Test Name
      View
      Delete
    

    
     {data.name}
      {data.testName}
       
      @fat
     
    
        
          
          }
          
    );
};

export default Profile;

it's my server site code

const express = require("express");
const mongoose = require("mongoose");
const router = express.Router();
const fs = require('fs-extra')
const UpoladSchema = require("../Scheema/UploadFileUser");
const UserUpload= new mongoose.model("UploadFileUser", UpoladSchema);
const CheakLoginControler = require('../MiddleWears/CheakLoginControler');
const fileUpload = require('express-fileupload')
const Uploadss=  express.static('Uploads');
router.post("/UserReport",fileUpload(),Uploadss,async(req,res)=>{
  const file= req.files.File;
const name= req.body.name;
const testName= req.body.testName;
const date= req.body.date;
  console.log(req.files.File)
  const filepath= `${__dirname}/../UploadsTestReport/${file.name}`;
    file.mv(filepath ,err=>{
      try {
        return res.status(200).json({name: file.name , path: `/${file.name}`})
      } catch (err) {
        console.log(err)
        return res.status(500).json({msg:'Fild to upload image'});
      }
    })
    var newImg=fs.readFileSync(filepath);
    const encImg= newImg.toString('base64');
    var Img= Buffer.from(encImg,'base64');
    console.log(Img)
    const TestReport = new UserUpload({
      name: name,
      testName: testName,
      img: Img ,
  });
  await TestReport.save();

 })

 router.get("/ReportPost",async(req,res)=>{
  try {  
      const user = await UserUpload.find({name: req.query.username});
      // console.log(user)
      if(user&&user.length>0){
          res.send(user)
      }
      
  } catch (error) {
      res.status(200).json({
          "error": "Wrong Username and password"
      }); 
  }

   
})

module.exports = router;

uservry41 · Answer

First of all your image is sotred in a Buffer form so you should convert back into base64 string from buffer

.....toString('base64')

secondly in order to show base64 image path should look like this

data:image/png;base64

you should store mime type of file then the src tag will look like this

yourModel.imgSource= `data:${imageType};charset=utf-8;base64,${imageBuffer.toString('base64')}`

base64 image doesn't display in reactjs

1 Answers