1

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!

Improve this question
2
  • 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. <img src="DATA GOES HERE">. See stackoverflow.com/questions/8499633/… Commented Aug 4, 2020 at 20:25
  • Have a look here: codeburst.io/… Commented Aug 4, 2020 at 20:25

2 Answers 2

Reset to default
1

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.

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

1 Comment

okay, thanks from a comment i saw, i think i will save the image as a normal blob from now on
0

We can use an third party app to upload a file .

  1. File is send from browser to server .
  2. Server stores that file in its temporary disk .
  3. Server sends file to cloud storage .
  4. Cloud storage sends an URL of image .
  5. URL is stored in DB of server .
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.