I am trying to load the local images in the react app without using import since if I had 100 images, that would be really not practical.
I read many posts and tried almost everything, but I cannot get this working.
import React from 'react';
import ReactDOM from 'react-dom';
import ocean from './images/ocean.jpg';
this works:
const background = <img className='background' src={ocean} alt='ocean' />;
this does not work:
const background = <img className='background' src={'./images/ocean.jpg'} alt='ocean' />;
also, this does not work:
const background = <img className='background' src={require('./images/ocean.jpg')} alt='ocean' />;
You could use src={require('./images/ocean.jpg').default}.
If you use require to import your images, require returns an ES module instead of a simple string. It's because in file-loader the esModule option is enabled by default.
As you don't want to use import, you'll need to get the default property of the required module.
Related
I've got a problem with importing css modules to react component.
import React from 'react'
import styles from '../App.css'
const Button = () => (
... className={styles.button}...
)
export default Button;
There is no compilation error and stuff like that. Everything seems to by right, but when I run server button looks by default as with no css.
You need to use
Module css must have name App.module.css
Then import
import React from 'react';
import styles from './App.module.css';
And use className={styles.button}
The issue is probably in your webpack config - please share
In the css-loader options, ensure the modules option is set to true
I have a component that takes a long time to load, when the user loads my homepage and when there is noting else left for the browser to do, I want to pre-fetch this heavy component in the background so that when the user clicks the link to load it, it's there instantly.
Is there a way to do this eager pre-fetching for later in React?
Code splitting implementation when using mapbox-gl with react-app using React.lazy and Suspense
import React from 'react';
import mapboxgl from 'mapbox-gl';
// IMPORTANT Please include the css required for mapbox-gl in the same file
import 'path-to-vendor-css/_mapboxgl.external.css';
function MyMapbox() {
// your map implementation
}
Now lazy-load the component where you want to use it.
import {lazy, Suspense} from 'react';
const MyMapbox = lazy(() => import('path-to-the-mapbox-component'))
// usage
//fallback prop displays "loading..." content
<Suspense fallback={<div>Loading...</div>}>
<MyMapbox/>
</Suspense>
I have a parent directory that contains children directories, where each contains an SVG component and I only need to import some of them. I'm currently importing all the components I need by doing this:
import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';
However this seems very verbose. Is there a less verbose way of doing this?
I thought about destructuring, but I wasn't sure how to do this since each file is in a different folder.
Typically, you want to import similar components from a single source (you will get auto-complete too):
import {
FacebookIcon,
TwitterIcon,
DiscordIcon,
DiscordIcon,
MediumIcon,
YoutubeIcon,
} from "project/icons";
// Usage
<FacebookIcon/>
// Same
import Icons from './project/icons';
// Usage
const Icon = Icons.FacebookIcon;
<Icon/>
To achieve this, create index.js file in project/icons and make named export for each of the components.
export { default as FacebookIcon } from "./FacebookIcon";
...
Currently, I have a folder in a Vue project which contains all my default images that it has been used through the app. The folder path is web/images/defaults/<imageNames>.png. I'm able import the images on my component by importing them individually like so:
import ImageName from '../../../../../../web/images/defaults/ImageName.png'
However, I want to create a file & add the images path to const variables & being able to import the file in the component.
I have tried:
import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
Then, I imported it in my component like so:
import DEFAULT_IMAGES from '../../assets/images';
And I tried to v-bind to the src attribute
<img :src="DEFAULT_IMAGES.imageName1" >
However, it's not working as soon as I imported. What am I doing wrong?
I have found the solution:
I didn't include the right path to get the images. Originally, I tried to access the images in the same folder like so:
import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
However, I needed to add ./ before the image name like so:
import imageName1 from './imageName1.png';
import imageName2 from './imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
I am working a reactjs file that uses the react-ace library. Currently my code looks like this
import React, { Component } from 'react';
import 'brace/mode/html';
import 'brace/theme/monokai';
import AceEditor from 'react-ace';
class AceHTML extends Component {
render () {
return (
<AceEditor
mode="html"
theme="monokai"
name="Sample"
showPrintMargin={false}
wrapEnabled={true}
value={this.state.value}
editorProps={{
$blockScrolling: true
}} />
);
}
}
However I am trying to figure out a way to make it more generic. So I could say something like <Ace mode="javascript" /> and then in the component would import brace/mode/javascript instead of brace/mode/html
So my question is: What is the best way to load a library instead of using import?
PS: The reason I specifically pointed out that I am using react is because I am using create-react-app to create the application.
import all assets you want to use and you will be able to make changes as you please.
If you don't want to import all assets initially, you can use dynamic imports and load required chunks when a user requests a different editor configuration:
async changeTheme(theme) {
await import("brace/theme/" + theme)
this.setState({ theme });
}
async changeMode(mode) {
await import("brace/mode/" + mode)
this.setState({ mode });
}
live demo:
https://stackblitz.com/edit/react-nzivmp?file=index.js (without dynamic imports since they don't work on stackblitz)
import React from 'react';
import { render } from 'react-dom';
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/html';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import 'brace/theme/github';
function onChange(newValue) {
console.log('change',newValue);
}
// Render editor
export default ({mode, theme}) => (
<AceEditor
mode={mode}
theme={theme}
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{$blockScrolling: true}}
/>
);
Importing libs isn't job for React. Webpack decides what to load to a bundle file. If you want to use any options based on props you'll need to import both anyway.
If there are large files and you don't want to load both of them for your application's user you can fetch them via AJAX request.