0

I have a react.js project and need to display an image using the <img> tag.

I have an endpoint to get the image.

I can see the image is loading in the network tab like this.

enter image description here

Even though the preview section is like this if I console log the response payload it has a data property with strange symbols which I believe is the image.

enter image description here

How do I generate a file in the front end to pass the src attribute of the img tag.

margherita pizza
  • 6,623
  • 23
  • 84
  • 152
  • I would rather update backend to send URL to image instead of large binary data but your question is probably similiar to [this one](https://stackoverflow.com/questions/2429934/is-it-possible-to-put-binary-image-data-into-html-markup-and-then-get-the-image). – Jax-p Aug 29 '22 at 08:45
  • Why are you loading the image with axios in the first place? Why not simply set the URL as src of the ? –  Aug 29 '22 at 09:05

1 Answers1

0

The response payload is an base64 image. You can show image like following:

render(){
    {this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}
Hazik Arshad
  • 456
  • 2
  • 8