I am adding multiple images in my web page by placing each image in same directory that of components (see screenshot) How can I place the image files in another folder and then access them inside my components.
content.js:
import React, { Component } from 'react';
import java from './java.png';
import neural from './neural.png';
import future from './future.gif';
import neuralnet from './neuralnet.jpg';
import dsa from './dsa.png';
import dl from './dl.jpg';
import ml from './ml.jpg';
import python from './python.png';
import ai from './ai.jpg';
<img className="futuregif" src={future} alt="gif" height="240" width="320"></img>
<img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
<img className="neuralcardimg" src={neural} alt="neural" height="65" width="65"></img>
and so on.. for all other images
Components and image files are getting mixed together is there any other specific way to do it by making a image folder but then what should be the path in src="".
File structure:
To clarify my comment.
Create a directory assets containing all your assets like images.
Then import the right path and load your content like:
import neural from './assets/images/neural.png';
class myComponent extends Component {
render() {
return (<div><img src={neural} alt=""/></div>);
}
}
In my point of view you can create a js file and export const imageName. in const you can specify your image path.
constant.js
import React from 'react';
import java from './java.png';
export const javaImg = java;
Then in your component file you need to import that js file and you can use those const according to your requirement.
Component
import constant from './constant';
class x extends Component {
constructor(props) {
super(props);
console.log(constant.javaImg);
}
}
export default x;
If you are importing images in same component it'll work but the component will become a lengthy and complex looking.
so my suggestion is like this.
Related
I'm creating a react app. I have an image folder with a few files. In order for React to render the image I have to import it like I import other modules. Something like this:
What I want to do is import the whole image folder, and then find a way to access each file in my Component. for example:
import img from '.../img'
In my JSX, I want to be able to access each of the files from the imported image folder.
Is it possible to do?
You still need to import those images in some place. For cleaner syntax in your main component file, I will group the image files in 1 file
//grouping images in one module. Let's say it is image.js
import imageA from <your-patha>
import imageB from <your-pathb>
import imageC from <your-pathc>
export default {
imgA: imageA,
imgB: imageB,
imgC: imageC
}
//Home component
import Images from '<image.js path>'
const Home = () => {
return (
<img src={Images.imgA} //...other props />
)
}
The best way to do this is you can put all your images in the public folder and refer like below on component.
<img src="/image.jpg" alt="image" />
I have something like this.
I want to import multi images with shorter code.
I tried to use a template string like this
But it seems to require not to show my image.
You can use an index file to re-export all the images in folder
assets/images/forest/index.js
import layer0001 from './Layer_0001.png';
import layer0002 from './Layer_0002.png';
import layer0003 from './Layer_0003.png';
export { layer0001, layer0002, layer0003 };
and importing them as named import
import { layer0001, layer0002, layer0003 } from 'assets/images/forest';
or import everything
import * as forest from 'assets/images/forest';
which allow you to do a dynamic URL like
let layer = 'layer001';
backgroundImage: `url(${forest[layer]})`
I am trying to make an app in react native and am starting to at least place an image as the screen when you click on the app.
The problem is that the app is unable to find the image or the javascript file that I call. I tried to change the location of the files and it seems to not be doing anything.
Here is the code for the Start Screen file
import React, {Component} from 'react';
import {Image} from 'react-native';
const StartScreen = () => (
<Image source = {require('./src/assets/images/StartScreen.png')} />
)
export default StartScreen
Here is the code for the App.js file
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import StartScreen from './src/screens/StartScreen'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<StartScreen />
</View>
);
}
}
I should be getting the picture but am instead getting told that the picture or the file do not exist. The App.js file is in the top level of the folder, while the picture and StartScreen.js are in a src folder.
It sounds like your problem lies in your folder structure & the path you're using to require your image.
From what I can gather, your StartScreen.js file is in a screens folder (which is in src), and your image is in an assets folder (which is also in src).
So in your StartScreen component your relative path for your image is wrong. Take a look here for an explanation of how relative paths work.
Try the below:
<Image source = {require('../assets/images/StartScreen.png')} />
I am currently setting up my Redux store and importing many different reducer files. This is beginning to look messy and wanted to know if there was a way to import all modules with the same file suffix. So currently...
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
Is there a way that I can import all 'reducer.js' files instead of manually import each module separately when each of the file paths is different?
As written in the duplicate question:
If you create an extra file reducers.js, with this definition:
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
export {
reducerOne,
reducerTwo,
reducerThree,
reducerFour,
reducerFive,
reducerSix,
reducerSeven
};
Then you can use this in your main file:
import { reducerOne, reducerTwo, reducerThree, reducerFour, reducerFive, reducerSix, reducerSeven } from '../reducers.js';
You basically 'bundle' all your reducers into one file with only one path. And since it's very few syntax, automating it to create such a file is trivial.
I am building a React App which consists of lot of smaller components. At present I am importing the components in app.js like this:
import Nav from './components/nav'
import ColorPicker from './components/colorPicker'
class App extends Component {
render() {
return (
<div>
<Nav />
<ColorPicker />
</div>
);
}
}
export default App;
Each component is a separate js file (nav.js, colorPicker.js). Is there anyway to just import everything in components folder so I don't have to explicitly specify importing of the components.
I'm not sure if there is a way to just import everything from a folder with one module per file, but you can make a kind of index.js file in which you would import everything that you will want, then:
export * from nav;
export * from colorPicker;
And then you only have to import your one index file from which you can: import {nav, colorPicker} from './components/things';
You always have to explicitly set the import of the components you use, but what you can do is decrease the amount of code typed by setting up an index file where you export all components you want to make available in said file, like this for example:
./components/index.js
import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';
export {
Component1,
Component2,
Component3,
};
Then import the needed components in the desired file like this:
./app.js
import { Component1, Component2 } from './components';
class App extends Component {
render() {
return (
<div>
<Nav />
<ColorPicker />
</div>
);
}
}
export default App;
Tree structure
app.js
components
+---
Component1.js
Component2.js
index.js
If you can add a babel plugin, you can use babel-plugin-wildcard, that is a plugin that makes exactly what you want.
Taken from NPM:
With the following folder structure:
|- index.js
|- dir
|- a.js
|- b.js
|- c.js
the following JS:
import * as Items from './dir';
will be compiled to:
const Items = {};
import _wcImport from "./dir/a";
Items.A = _wcImport;
import _wcImport1 from "./dir/b";
Items.B = _wcImport1;
import _wcImport2 from "./dir/c";
Items.C = _wcImport2;
meaning you will be able to access the items using Items.A and Items.B.
You can also selectively choose files using:
import { A, C } from "dir/*";
which in the above example would convert to:
import A from "./dir/a";
import C from "./dir/c";
The above is like doing:
import * as temp from "dir";
const { A, C } = temp;
Answer found inside this post.