How convert type data buffer to image in react js

Question

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

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

In this way I register

and in this way the image is stored

[This post was really helpful](https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react) It shows how to get it with url and binary. — Tolulope Durosinmi, Sep 15 '21 at 12:37

xom9ikk · Accepted Answer · 2020-12-21T21:48:47.823

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.

edited Dec 21 '20 at 21:48

answered Dec 21 '20 at 12:40

xom9ikk

2,159
5
20
27

Hello, it generates a string that seems not to be base64, I put it in a web page [link](https://codebeautify.org/base64-to-image-converter) to check if it is base64 and it does not convert me to an image – Mauricio Cartagena Dec 21 '20 at 17:01
it the next image => [Image](https://i.stack.imgur.com/vkqMN.png) – Mauricio Cartagena Dec 21 '20 at 17:11
Try adding `data:image/png;base64,` to the beginning of the line – xom9ikk Dec 21 '20 at 17:18
Hello i have example in codesandbox check in [example](https://codesandbox.io/s/happy-christian-z4m1x?file=/src/LoadingData.js) – Mauricio Cartagena Dec 21 '20 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 '20 at 20:46
`const showQuestionShape = async ( req, res = response ) => { const preguntaFormas = await PreguntasFormas.findAll(); res.status( 200 ).json({ ok:true, msg: 'List shape questions', preguntaFormas, }); };` – Mauricio Cartagena Dec 21 '20 at 20:53
show Mysql [saveDataBase](https://i.stack.imgur.com/rbldv.png) – Mauricio Cartagena Dec 21 '20 at 21:09
No) just show `js` code how you create a new record in the table – xom9ikk Dec 21 '20 at 21:15
[codeRegister](https://i.stack.imgur.com/k7J9R.png) – Mauricio Cartagena Dec 21 '20 at 22:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226263/discussion-between-mauricio-cartagena-and-xom9ikk). – Mauricio Cartagena Dec 21 '20 at 22:35

How convert type data buffer to image in react js

1 Answers1

Linked