How to display image from mongodb using Reactjs

Question

I've saved my image in Mongodb like that :

 "img": {
    "data": "<Binary Data>",
    "contentType": "image/png"
}

I try to display it in ReactJS using this code :

..{products.map(product => {
   <img src= {product.img} />

But nothing is displayed. Any idea please to fix it.

Gabriel Diez · Accepted Answer · 2018-08-29 08:19:19Z

2

You are trying to display your image in src attribute with binary data when it expect an url.

If it's binary data you need to diplay it like this and tell to your component that you are passing binary data

<img src={`data:image/png;base64,${product.img.data}`} />

edited Aug 29, 2018 at 8:19

answered Aug 29, 2018 at 8:13

Gabriel Diez

1,6932 gold badges19 silver badges26 bronze badges

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

3 Comments

Sihem Hcine Over a year ago

I get this error : ` Syntax error: JSX value should be either an expression or a quoted JSX text (93:60)`

Gabriel Diez Over a year ago

Try this new version. Also be sure to check how your binary data is formatted. Maybe it already have base64, or data:image/png;base64, so you need to adapt it. If you can give me an example of your binary data i can give you exactly what it's supposed to be

Sihem Hcine Over a year ago

It's okey, So, i have edited the new code , the image cannot be displayed but i get new error : data:image/png;base64,[object Object]:1 GET data:image/png;base64,[object Object] 0 ()

Collectives™ on Stack Overflow

How to display image from mongodb using Reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related