How to display a dynamic image in nodejs?

[derick.007]

I have a folder called documents which is placed at the root of the project. And all the uploaded images gets stored in this folder. Now, when I send the image name through an api the image does not load?

I have used dynamic source settings.
I have renamed the path as /documents/{image_name}
I have renamed the path as …/document/{image_name}
And also the url does not load even if I try to load the image in static way.

What is the solution for this ?

[Dave]

Try creating public/document directory and calling from there? Or store to S3 on AWS, use the Wappler AWS S3 Connector (very easy to use) for get and put, free tier is very good, and for more space doesn’t cost a lot, a few Dollars a month.

[Mr.Rubi]

Hi Derick

Judging by the name of the folder, it lies outside the public area (there is a “public” folder in the root of your project) and would you like only registered users to have access to the downloaded files, and not everyone in a row? If this is not the case, and the images should not be protected by security, then just move the folder where the images are uploaded inside the “public” folder, as Dave suggests above.

If my suggestion is correct, and you would like the images to be protected by security, then you have two options:

1. As Dave suggests to connect to the S3 service.
2. If the project requirements involve storing files only on the customer’s side (as was the case in my case), implement everything with improvised means (because this is also quite simple).

A guide on how to do this:

Step #1 - create a server action

In the server action, we create a parameter (2), by which we will find the record of the saved image in our database. It can be a simple incremental id, but I use a unique 24-digit code, so my parameter is called file_uc. The first step I do is checking the user (3). If it is a logged-in user, he will get access to the file, otherwise the server action will return an empty response to him. After checking, I use the parameter created above to filter the records in the table with files (4). I find the necessary record and take a field from the table, with the path to the file. I use the received path in the final step “File download”. The server action is ready.

Step #2 - create a route to the server action

We create a route to the server action and specify the filtering parameter in the path field that we created in the server action in the previous step. The route is ready.

Step #3 - configure the image source on the client side

In the image element, we create a dynamic attribute with the image source.

Select the route we created.

As a parameter, we select a unique code (it can be an id), which we get from our repeat.

Now everything works. We receive images that are not in a public folder and are under security protection

[derick.007]

It worked, thanks