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

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 It shows how to get it with url and binary. — Tolulope Durosinmi
– Tolulope Durosinmi, Commented Sep 15, 2021 at 12:37

xom9ikk · Accepted Answer · 2020-12-21 21:48:47Z

14

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.

answered Dec 21, 2020 at 12:40

xom9ikk

2,3095 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

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

it the next image => Image

Try adding data:image/png;base64, to the beginning of the line

Hello i have example in codesandbox check in example

@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

|