Store image in MongoDB and show it in React.js

Question

Image is stored in Mongo:

const Posts = new Schema({
    postImg: {
      data: Buffer,
      type: Buffer,
      contentType: String
    }
})

In database document looks like this:

"postImg" : { "$binary" : "/9j/4AAQS.blaBla.long.binary.string.."}

And when image is fetched to the client, it looks like this:

{data: Array(84106) [ 255, 216, 255, … ]
type: "Buffer"}

In this case images should be shown like this:

<img src={`data:image/png;base64,${props.postImg}`} alt="a"/>

But that won't work, alt gets shown. I tried {props.postImg.data}, but still nothing.

Any help?

P.S. I use node and express for server-side, and multer package for image upload

panta82 · Accepted Answer · 2019-10-16 19:07:27Z

2

The image seems to be fetched as a node.js Buffer type, which is then encoded as an array of bytes and sent to client. You need base64 string on the client.

The easiest way to get there would be to convert buffer to base64 string on your backend, and then send that to client. Eg.

const post = await getPostImgFromDatabase();
res.send({
  ...post
  postImgBase64: Buffer.from(post.postImg).toString('base64')
});

Then on client:

<img src={`data:image/png;base64,${props.postImgBase64}`} alt="a"/>

answered Oct 16, 2019 at 19:07

panta82

2,7213 gold badges22 silver badges38 bronze badges

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

1 Comment

JozeV Over a year ago

Thank you panta82, I did it in similar way.

Collectives™ on Stack Overflow

Store image in MongoDB and show it in React.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related