I have an application where I store in database the image paths. The paths are relative to my file system, not to the project.
When I issue in React:
<img alt={this.props.alt} src={require('/fs/storage/images/logo.jpg')}/>
I´m getting the following error:
You attempted to import /fs/storage/images/logo.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's node_modules.
How can I solve that ? Where should I put the symlink that the message is suggesting ?
How you can read filesystem or db from react if it on client side?
Do you have server? That communicate with database?
You should read image on server and send in on client, where use it in React
Related
<div class="slide__Show1">
<h2>It's More Than Just A Sport</h2>
<p>Get back on the field in style!</p>
<img src='../E-commerce/IMG/Soccer.jpeg'>
</div>
Live server works as a real (remote) server, and looks for the image like a real server would do: Not on your local machine, but relative to the project root on your "server".
When you open a local HTML file on your computer/in your browser, it is able to look for the image file locally anywhere on your computer, and thus is a bit easier to satisfy.
So there's a slight difference which types of URLs/paths you can use in a local file and a file that is supposed to work on a server.
In your case, you need to use either an absolute path or a relative path.
Absolute path: https://examplesite.com/assets/img/soccer.jpg
Relative path: /assets/img/soccer.jpg
Your relative path goes one level UP (out) from the root folder of your project (because of ../) and searches for a file that is probably outside your website folder, in the E-commerce directory.
I am about to learn ReactJS.
I want to hide the filesystem structure of my server and only show the project root.
If i go to inspect tools in google-chrome i can see where my project is located on my C: Drive.
Wasnt able to find something about it and Ive got no Idea.
Hopefully, someone can help me.
This is because you are using your computer as a server to serve your site so the inspect tools are able to recognize the origin of the code, assets, and images.
Locally, even using gatsby develop or gatsby build (and gatsby serve) you will always be able to see the root of your project, it happens with all web development files, not only in Gatsby.
In a real scenario, where it's a server (with a domain attached, not your PC) that serves the files you will never see the origin because your site will be placed in the /public or /www of your server. To prepare your project to be deployed, you should run gatsby build command, which will create a /public folder in the root of your project with your code compiled, that folder is the one that needs to be deployed.
This is normal in development environment, for deploy your project try one of these approach in root of you project:
npm build
or
yarn build
This command build an optimized version of your project in build folder, after you can upload content of this folder to your www/plulic folder of your server,
I'm making a nodejs page to show as an management page.
I need to access a directory outside root directory.
But I can't access with relative path.
Directory example is like this.
C:\resultDirectory\projectA
C:\resultDirectory\projectB
C:\reportDirectory\ProjectA
C:\reportDirectory\ProjectC
C:\NodejsRootDIrectory
What I want to do for now is Access a file in subdirectory of "C:\resultDirectory\projectA". But at the end, I need to access them all. So I can't make webpage root to project A's directory.
What I've dont to access was relative path. sample is
$('#report').load("../../../ProjectA/Daily/DailyReport_191001_151843.html");
I've checked number of "../" and tried add and subtract several times.
For now, this is only code relative to access files.
$('#report').load("../../../ProjectA/Daily/DailyReport_191001.html");
When I check chrome's error, there is only 404 error. the browser can't find out the file I want to see.
How can I use absolute paths in my website while testing on my local filesystem? I know that I can use / to access the root directory of my website. However, this works only when my website is on the server. I want to be able to use absolute paths on my local filesystem so that I can do proper testing before uploading.
Is there a way to set a variable to a root directory in HTML? Something similar to Linux where you can define a variable WEBPATH=/home/user/website. Thus I can use e.g src="WEBPATH/folder/file.html for all the files I use in my website and I can modify WEBPATH depending on whether I am testing locally or using the server root folder.
I am open to other workarounds as well.
I'm assuming you're using a file url to access your HTML in the browser, in which case an easy way to get absolute paths working is by using a local webserver to serve your site.
If you have Python 3 installed, you can run python3 -m http.server from the command line at your web root, and it will serve your site at localhost:8000.
I have a Padrino app which doesn't seem to be aware of its own root path. The app works fine, but when I try to require a file I wrote and put into the models folder, it says it cannot find it. The file is required from within another file in the models folder: DvdActor.rb. I can use any of these paths and it won't find it:
/app/models/file.rb
file.rb
models/file.rb
app/models/fie.rb
...
It will only find it if I use:
"#{Padrino.root}/app/models/file.rb"
Furthermore, the Thnking Sphinx gem will also have problems writing its configuration file or indexing (if I hardcode the path to the config file).
And when I have Padrino generate a Model, it will create a new model folder in the root folder insted of in the app folder itself.
I could recreate my app from scratch and copy the files over but I already have Heroku and git setup, etc. and don't want to recreate all this (sometimes simply copying the files over doesn't work properly).
Is there a way to reset this?