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?

You can create a symlink, but I'd advise against doing stuff like this, since you'll have to remember that symlink whenever you move to a new machine, or deploy, or include it in the deploy process.. — Predrag Beocanin, Jan 31 '19 at 12:28

Predrag Beocanin · Accepted Answer · 2019-01-31T15:11:19.027

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

edited Jan 31 '19 at 15:11

answered Jan 31 '19 at 13:32

Predrag Beocanin

1,402
3
18
25

where shall I run ln -s ../../files ./images .. Inside the react folder ? – Arebhy Sridaran Jan 31 '19 at 13:50
@ArebhySri yeah inside the project folder! Then you can `import someImg from ./images` – Predrag Beocanin Jan 31 '19 at 13:50
sir I got Module not found: Can't resolve './images' in '/home/arebhy/Desktop/Arebhy/react_project/wedding_car/client_src/src/component' error sir – Arebhy Sridaran Jan 31 '19 at 13:57
Try updating your require to this: `src{require("../../images/revenue_Licence_Copy/5.jpg")}` ? – Predrag Beocanin Jan 31 '19 at 14:05
If your images folder is 2 folders up from where you want to use it, adjust your require to that – Predrag Beocanin Jan 31 '19 at 14:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187665/discussion-between-arebhy-sri-and-predrag-beocanin). – Arebhy Sridaran Jan 31 '19 at 14:27

How to get folder path from loopback into react app folder

1 Answers1