0

So I saved an image on mongodb by using URL.createObjectURL(evt.target.files[0]), and now when I retrieve it from mongodb in my react app it doesn't work, it is not displayed.

I have this object that gets populated with the users that I get from mongodb:

<div className="content">
    <h2>{user.name}</h2>
    <p>{user.job}</p>
    <img src={user.picture ?? ''} alt='' />
</div>

On mongodb the picture proerty looks like this:

{
    picture: "http://localhost:3000/17d6055e-6b1f-440a-bb6a-bac0af1e7530"
}

Bu when I want to use it my image src in react it doesnt show anything

code_dude
  • 951
  • 2
  • 15
  • 28
  • I believe you have to convert it to base64 and save it. I am not sure though – LoXatoR May 04 '20 at 21:01
  • You should avoid storing images in a database. They'll be very slow to load on the client and you're capped by 16mb Mongo document limit. Instead, the images should be saved to and served from a directory. Click here for an [image microservice example](https://stackoverflow.com/questions/52323381/image-returned-from-rest-api-always-displays-broken/52324048#52324048). On that note, since you're using Mongo, here's a [real-world example using Mongo](https://github.com/mattcarlotta/SJSITAPP-Image). – Matt Carlotta May 04 '20 at 21:44

0 Answers0