Error Importing Image into React Component - javascript

I have an images folder with one image stock.jpg in it. When I try to import it into my Movie component with import {stock} from '../images/stock.jpg' I get an error Attempted import error: 'stock' is not exported from '../images/stock.jpg'. The file path in the import looks fine to me, here's my directory structure
What am I doing wrong?

Try again to export without {}
import ImageJPG from "../images/stock.jpg";
If it is svg
import {ReactComponent as ImageSVG} from "../images/stock.svg"

Related

Attempted import error in react app but the path and everything is correct

I am receiving the following error : Attempted import error: 'MyPropertiesForm' is not exported from '../../forms'. and I cannot figure out why because everything is correct.
Here is how I import import { MyPropertiesForm } from '../../forms';
// this file is in
E:\falala\src\containers\MyPropertiesPage\MyPropertiesPage.js
And here is how I export
const MyPropertiesForm = compose(injectIntl)(MyPropertiesFormComponent);
MyPropertiesForm.displayName = 'ContactDetailsForm';
export default MyPropertiesForm;
//this file is in
E:\falala\src\forms\MyPropertiesForm\MyPropertiesForm.js
Try
import MyPropertiesForm from '../../forms/MyPropertiesForm/MyPropertiesForm';
Pay attention that the path you gave was only to the "form" folder but the export was actually in a file deep inside that folder.
And also pay attention that when you import a default exported module so you don't write it inside {} but write it as is named.

How to import multi images in ReactJS

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]})`

Inline import export component throwing error on hot reloading

For context, let me try to explain a little more.
In my project I have a folder, as example, for components.
Inside that folder I have my components files, and an index.js file where I import all the components and export than in the same line as follows:
export { default as Button } from './button'
export { default as Loader } from './loader'
export { default as ImageBackground } from './image-background'
So than I can import these components in Screen Component like that:
import { Button, Loader, ImageBackground } from 'src/components'
If I edit the components file, save and reload the project, everything works fine.
The problem is that when I edit any of these components with the Hot Module Replacement (Hot Reloading) actived, when it is triggered after an edit, it throws the following error:
Unhandled JS Exception: Requiring module "src/components/index.js", which threw an exception: TypeError: Cannot redefine property: Button
Has anyone have any idea why this is happening?
Thanks in advance!
Obs: When I import the component direct without using the index.js or if inside the index.js, I first import the component, than I assign the component to a variable and than I export this variable, it works fine.
my problem was solved when I changed render = () => (...) to render(){ return (...)} in react component

Automatically import modules with the same file suffix

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.

Good practice to import images in ReactJS?

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.

Categories

Resources