0

so i am creating a web app that allows users to post images and i save the images as binary using multer into my mongo database, now i want to retrieve the images and render it on the webpage but the images dont show when i use the img tag, please do you know how i can transform binary image data to normal webpage readable image format, just found out i cant use "fileSystem" in react and i was wondering if there is anyway i could do this or any snippet of code i could use to complete this task, thanks!

DBankx
  • 113
  • 9
  • My first top-of-my-head thought is to create a data img tag. You can encode the data and put it directly into the HTML image tag. ``. See https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – Stephen R Aug 04 '20 at 20:25
  • Have a look here: https://codeburst.io/image-uploading-using-react-and-node-to-get-the-images-up-c46ec11a7129 – Robert Harvey Aug 04 '20 at 20:25

1 Answers1

0

If you can't/don't want to store it as a regular file and serve it, you could try displaying it using base64 format. You can find more about it here: How to display Base64 images in HTML?

But in simple words, you simply have to display a tag like this <img src="data:image/png;base64,base 64 here ..." />

But I strongly suggest that you should use some file upload functionality instead of saving the raw bytes to the database.

Mihail Feraru
  • 596
  • 3
  • 13
  • okay, thanks from a comment i saw, i think i will save the image as a normal blob from now on – DBankx Aug 04 '20 at 20:34