How you render images with react from mongodb where you used multer to upload them

the task i am trying to accomplish here is to upload pictures to mongo db using node and render them using react in the front end.

I do manage to upload pics using insomnia to mongo. the issue is i cant decode them. or at least that’s where i think the issue is.

Here are all the steps i have followed:

  1. i have created a schema:

enter image description here

2.i have created a storage method, an upload , a addimages and get images methods:

enter image description here

  1. Hooked them up to the router

enter image description here

  1. added some pics jiff but also png too to the database and checked if db was populated correctly which it has:

enter image description here

  1. on the front end i get the images with an axios request and save them to state:

enter image description here

  1. i am getting the images from the state (escImages) loop through and try to render them to the screen

enter image description here

  1. this is what i get:

enter image description here

The images aren’t rendering for some reason!!! any idea what that might be?
Where em i wrong?
images are saved and the mongo db on a separate collection and also on a local folder under the name pictures.

enter image description here

Still i am not sure what the issue is and cant render them on the screen.

i have tried to render the images to the screen getting them from mongo db and still cant achieve it. i think there is an issue with decoding the pics? i am not sure.