React import: Navigate one folder up
Remove the first /
in import MyFunction from '/../FolderA/File3.js';
and it will work as expected.
import MyFunction from '../FolderA/File3.js';
React import folder navigation
In your code you're providing the image source based on your React app's location, which is neither related to web application's root location, nor media or static files locations (to be configured), so the browser will not know how to render it. Depending on what server you use (nginx, Express) you have to configure your static and/or media files and then specify in your image source based on how you configured.
In your present situation you can do the following:
Import
const reactImage = require("../Assets/myimg.png");
And then use it:
<img src={reactImage.default} />
If you had media files already configured on your server and properly resolving, it would be just
<img src="/media/Assets/myimg.png" />
Assuming media location is already configured and is pointing to the parent directory of your Assets.
In your example you were assuming the relative path of your React import and the image source hardcoded into image tag are same, but they are actually not.
How to import component in react native past two folders?
Use ../..
to go up two directories.
React import multiple components from a folder
as @casimirth stated above since those components are from different files, even though on the same folder, then you need to import them separately as below
import Login from "./components/Login"
import Question from "./components/Question"
But i think i know what you're looking for, being able to import them all on one line right?
below are couple of the ways
1 .put them all on single file and use exports
, since in one file only one component can use export default
// ./components/componentfile.js
export const Login = () => {...
export const Question = () => {...
then where you're using them you can import them as
import {Login, Question} from '.components/componentfile'
if one of the file is exported with default as below
const Login = () => {...
export const Question = () => {...
export default Login;
then the using them will be as below
import Login , { Question } from './components/componentfile'
2. You wish to keep this two files separately and still import on one line
then you need to add another file in components file, prefered index.js since if you name a directory without specifying a file, index.js is one being called by default
So, you components directory will have three files,
./components
-index.js
-login.js
-questions.js
then without editing anything on your login.js,questions.js import them on your index.js and export them from it as below
import Login from './login'
import Question from './question'
export {Login, Question}
then where you're using them you just import them as below
import {Login, Question} from './components' //note with index.js no need to mention //it on import
React import component from another folder issue
No, I see you importing: import Image from '../../Components/Image'
. This mean you importing index
of Image folder
.
But in your code, you defining Image.js
not index.js
.
So, you have to import like this:
import Image from '../Image/Image'
Or, you can rename file Image.js
to index.js
to shorten the code when import:
// rename Image.js to index.js
// then, import file:
import Image from '../Image'
reactjs - import 3 levels deep react
Every step up in the folder structure is a ..
followed by a /
.
import Context from '../../provider'
How can I access inner directories in react
from PulsingCircle
folder import to styles
should be:
../../styles/Circle.module.css
or
./../../styles/Circle.module.css
Related Topics
Create a Newline for Every X Number of Characters
How to Retrieve Value in Input Checkbox (Using Reactjs)
How to Detect Overflow of React Component Without Reactdom
Pass a String With Double and Single Quotes as Parameter to JavaScript Function
React Open Modal Window on Click in Another Component
What Does Webkitformboundary Mean
Single Quotes in String With Jquery Ajax
Disabling a Button Within a Stateless Component - React
Electron - How to Add External Files
How to Create a Horizontal Scrolling Chart.Js Line Chart With a Locked Y Axis
Passing Value from Java to JavaScript
How to Open a Web Page Automatically in Full Screen Mode
Display Data Label (Legend) in Line-Chart Using Chartjs
Display a Loading Icon While Images Loads
How to Remove All Li Element of Same Class Except First Li Element in Jquery or JavaScript