How to convert MongoDB Buffer to Image in React/Node/Express

Question

Technical Specifications: React, Node, Express, MongoDB through Mongoose

I am building my GET API to retrieve user images from my MongoDB. I Currently have my document containing the image value as a buffer(see screenshot #1)

The GET API returns the following data(see screenshot #2):

The Question I have is how do convert the Buffer value returned from MongoDB into a variable type that can be used to display the image representation of the Buffer.

I found some answers online such as the following code but I do not fully understand how the values are parsed. Source: https://www.geeksforgeeks.org/upload-and-retrieve-image-on-mongodb-using-mongoose/

<img src="data:userPhoto/<%=image.img.contentType%>;base64,
   <%=userPhoto.img.data.toString('base64')%>"/>

I would ideally like to use extract the Buffer value from the API response and then convert directly to an image and then pass that image to the html/react component. Similar to the following code below:

const [userProfileImage, setUserProfileImage] = useState({});
//in API GET call
await axios({
        method: 'get',
        url,
    }).then(function(response){
       setUserProfileData(response.data[0].userPhoto.data);
    }



   //code to convert the local userProfileImage Buffer value to   image, using Node Base64 maybe ??
   //Not too sure what variable types I should pass into the Buffer.from
    let imageValueConverted = Buffer.from(userProfileImage, '').toString('');
    return (
            <div>
                <img src={imageValueConverted}/>
            </div>
        );

you can't modify the backend to return the buffer as a base64 string? — Sebastián Espinosa
– Sebastián Espinosa, Commented Nov 23, 2021 at 7:20

Molda · Accepted Answer · 2021-11-23 08:46:19Z

3

Try to set the image like so:

const [userProfileImage, setUserProfileImage] = useState({});
//in API GET call
axios({
    method: 'get',
    url,
}).then(function(response){
    let user = response.data[0];
    setUserProfileImage(`data:${user.userPhotoExtensionType};base64, ${Buffer.from(user.userPhoto.data).toString('base64')}`);
});

and render it like this:

return (
    <div>
        <img src={userProfileImage}/>
    </div>
);

edited Nov 23, 2021 at 8:46

answered Nov 23, 2021 at 6:46

Molda

5,7042 gold badges26 silver badges42 bronze badges

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

2 Comments

Mayyar Al-Atari Over a year ago

Thank you this worked the only edit I needed was setUserProfileImage(data:${user.userPhotoExtensionType};base64, ${Buffer.from( user.userPhoto.data).toString('base64')} );

Molda Over a year ago

Glad i could help. I actually thought about the Buffer.from but wasn't sure. It's good you figured it out.

Collectives™ on Stack Overflow

How to convert MongoDB Buffer to Image in React/Node/Express

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related