how to load images from a local directory and display them in reactjs app?

Question

hello dear developers,

i'm using ant design app template as frontent and a graphql api serving as backend, i have reached a situation where i would like to fetch list of posts, everything is working fine on the backend, the API returns the posts along with their images path.
To understand more , images path are save on database, and the images itself are stored in local folder.

Now, i dont know how to load those images with paths i have retrieved when i fetched the posts.

i have tried google, but no similar situation, i've found an issue on gethub but it was talking about displaying a single image by using import image from folder and then put it inside img tag and that is not my case.

i know there is an alternative way which is to deploy my backend on a web server and then get direct like to the stored images but thats not ideal for me.

ps: " im a newbie"

Thank you all,

thank you for your response, but i dont know which part of code you would like to see, thou my question is simple does not require to see any code. — Mohamed Aarab
– Mohamed Aarab, Commented Jan 9, 2020 at 14:00

NewVigilante · Accepted Answer · 2020-01-10 06:57:35Z

4

There are a couple of different approaches:

1) Public folder

When you start a react app, in your folder structure you'll find a "public" folder. This folder for example also contains the favicon. When you put your images there, you can reach them by

<img src="/imagename.jpg" />

In your database, you will need to store the path "/imagename.jpg" to reach them then.

If you would create a subfolder in the "public" folder, the path in the src attribute will also need to change. Example: - public -- assets --- avatar.jpg

<img src="/assets/avatar.jpg" />

2) S3 (or some similar services)

Upload them to Amazon S3 and store that path. This can either be done manually or let your API handle this. This way you can just provide an absolute path to the img-tag.

3) Own webserver

Upload them to your own webserver while you upload the image.

Remark: Retrieving files from a local folder outside your project folder is not possible without the use of some other webserver.

edited Jan 10, 2020 at 6:57

answered Jan 9, 2020 at 13:27

NewVigilante

1,3091 gold badge11 silver badges24 bronze badges

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

4 Comments

Mohamed Aarab Over a year ago

your approach is working but, is there a way to get the images from a directory outside the project, because i have useed to save images on dir images where i set up my graphQl api project aka server side, im not an expert but i think saving my images on the front end folder is not ideal, and again im not sure just saying

NewVigilante Over a year ago

You have multiple approaches to this. You could store them on your webserver itself, but you'll need to make sure your API handles this or you can also store them on an S3 server or some other website, where you can just get the absolute url to reach them. Getting them locally from a different folder than your project folder is not possible.

Mohamed Aarab Over a year ago

okay i will save them on S3 server for now , Thank you so much for your help

NewVigilante Over a year ago

That's indeed the preferred solution.

Collectives™ on Stack Overflow

how to load images from a local directory and display them in reactjs app?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related