5

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

1

1 Answer 1

12

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.

10
  • Hello, it generates a string that seems not to be base64, I put it in a web page link to check if it is base64 and it does not convert me to an image Dec 21, 2020 at 17:01
  • it the next image => Image Dec 21, 2020 at 17:11
  • Try adding data:image/png;base64, to the beginning of the line
    – xom9ikk
    Dec 21, 2020 at 17:18
  • Hello i have example in codesandbox check in example Dec 21, 2020 at 19:41
  • @MauricioCartagena, can I ask you to show the code on the backend part you are generating buffer? And type of file you are writing to buffer. Thanks
    – xom9ikk
    Dec 21, 2020 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.