how to get images from mongo with axios and display them with react

Question

The server route:

router.get('/images', async (req, res) => {
const image = await Image.findOne({})

res.json(image)
})

Axios:

const image = await Axios.get("http://localhost:5000/images/images")
setAvailableFile(image.data.img.data)

if console.log availableFile i get:

img:
   contentType: "image/jpeg"
   data: {type: "Buffer", data: Array(11615)}
   __proto__: Object
   name: "download.jpg"
   __v: 0
   _id: "5feb25dff4b7b43344a92952"

react:

  <div>
      {availableFile && availableFile.data}
  </div>

now the thing is, when i try to display the image i get something like:

255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,219,0,132,0,9,6,7,16,16,15,21,16,15,15,16,21,16....

any ideas? thanks in advance!

Viet · Answer 1 · 2020-12-29T16:04:32.483

1

Try this, if the binary data is represented as a base64 string:

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

Ref: How to display binary data as image in React?

Why are you using div to display an image though?

edited Dec 29 '20 at 16:04

answered Dec 29 '20 at 15:29

Viet

12,133
2
15
21

Thank you for your answer!! but i am not sure how i can implement this on my code.. – Dean_Geva Dec 29 '20 at 15:45
see the answer here to convert binary data to base64 first – Viet Dec 29 '20 at 16:35

score 0 · Accepted Answer · answered Dec 30 '20 at 18:52

Ok so i figured it out, i'll share the solution. to make this work i needed to do 2 things:

the first one is what @Viet said.

and then i need to add {image.img.data.toString('base64')} to the get request:

router.get('/images', async (req, res) => {
      const image = await Image.findOne({})

      res.json(image.img.data.toString('base64'))
})

how to get images from mongo with axios and display them with react

2 Answers2