How convert type data buffer to image in react js

问题

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

回答1:

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.

回答2:

Hello I managed to solve this problem with this function I hope it helps you

// here I extract the data from arrayBuffer
const  { data } = pregunta;
console.log( data );

here we convert the data into base64

const img = new Buffer.from(data).toString("ascii")
console.log(img);

And result is

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/ ..... continue

Thanks

来源：https://stackoverflow.com/questions/65392241/how-convert-type-data-buffer-to-image-in-react-js