How to get folder path from loopback into react app folder

Question

I have created a reactjs app which is inside the Loopback folder.

I put a folder tree image below. as the picture inside the client_src have react files. I have used loopback-storage-component to store images. Those images are stored into files folder.

Now, my problem is to get stored images from files folder. So that, I used

<Img
    src={require("../../files/revenue_Licence_Copy/5.jpg")}
 />

while I run reactjs App using npm start into client_src folder. Then I got an error

Module not found: You attempted to import ../../files/revenue_Licence_Copy/5.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project'snode_modules/.

How to solve my problem I refer below link enter link description here but that also not solve my problem..

Please anyone help me?

Answer 1

So basically, you can do a symlink which links a folder inside your app folder to a folder anywhere else on the system. However, if at all possible, please avoid doing this. While a valid solution, it creates a whole bunch of problems in deployment, or moving the repo around. If you work with someone else, they have to have an identical setup as well etc. Moving the folder to the project folder, or having a backend serving data you want is a much better approach.

However, if you really wanted to, you could do, from inside the project folder's node_modules, so from the project root:

cd node_modules
ln -s ../../files ./linked_images

which would link your files folder to a folder called /linked inside the node_modules.

You can then reference the image inside by doing:

<Img
    src={require('images/revenue_Licence_Copy/5.jpg')}
 />

Here's a stack answer explaining symlinks