CODEWITHSUNDEEP
javascriptreactjs
Abhilash Muttalli
Abhilash Muttalli

Reputation: 1369

how to convert the binary data to image in reactjs

i have inserted an image to database and also i am receiving the image from database to server and to reactjs but in my react i am receiving it has binary data. but how do i convert the binary data to image in react.

class Pre extends React.Component{
  constructor(props){
    super(props);
    this.state={
      post:[]
    };

  }


componentDidMount(){
   let self = this;
  axios.get('http://localhost:8080/images')
  .then(function(data) {
      //console.log(data);
      self.setState({post:data.data});
      });
  }


  render(){

console.log(this.state.post);
    return(
    <div className="w3-container">


    <p className="addboard"> <Link className="linkpre"  to="/createstudent I">
      <button className="addbutton" type="button"><h1>+</h1></button></Link></p>


      {this.state.post}

)}
)}

</div>

    );
  }
}
export default Pre;

Upvotes: 3

Views: 15948

Answers (2)

Amit Bhardwaj
Amit Bhardwaj

Reputation: 1

The given approach is right,

<img src={`data:image/jpeg;base64,${binary_data}`} />

If your image is not rendering, please check your binary string, if the data:image/jpeg;base64 is already there, then please use the {binary_data} directly. Like as

<img src={binary_data} />

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104529

Converting binary data into image is not related to ReactJS, If you have the binary data then convert it into image like this:

<img src={`data:image/jpeg;base64,${binary_data}`} />

Upvotes: 8

Related Questions