How convert type data buffer to image in react js

user_11386203 0
Viewed 12046

Hello, i have next the image de type buffer, this data is one image, how can I convert my buffer data into an image

it shows me the following data when I make the request to the api

enter image description here

Any suggestion

The backend is made in node js sequelize MYSQL.

and the frontend in react js

I have next example

https://codesandbox.io/s/happy-christian-z4m1x?file=/src/LoadingData.js

With this he retrieved the data from the MySQL database enter image description here

In this way I register

enter image description here

and in this way the image is stored

enter image description here

reactjs buffer image html
1 Answers

First, you need to convert your Buffer to base64 string

const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

Second, you need to use your string as src attribute for img tag

<img src={`data:image/png;base64,${base64String}`} alt=""/>

I assume you are using react, so I recommend saving base64String in the component state and using it.

user_79206830
Related