1

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,

Mohamed Aarab
  • 846
  • 1
  • 11
  • 16

1 Answers1

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.

NewVigilante
  • 1,291
  • 1
  • 7
  • 23
  • 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 – Mohamed Aarab Jan 09 '20 at 13:58
  • 1
    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. – NewVigilante Jan 09 '20 at 14:06
  • okay i will save them on S3 server for now , Thank you so much for your help – Mohamed Aarab Jan 09 '20 at 14:09
  • That's indeed the preferred solution. – NewVigilante Jan 09 '20 at 14:11