J'ai une application échafaudée en utilisant create-react-app
. Je voudrais avoir la structure de dossiers comme ceci:
src/
components/
CustomAppBar.js
images/
logo.svg
App.js
index.tsx
images.d.ts
Actuellement, je voudrais utiliser le logo.svg
dans le dossier images de CustomAppBar.js
. Actuellement, ce fichier ressemble à ceci:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import logo from '*.svg';
const styles = {
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
root: {
flexGrow: 1,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static" title={<img styles={{height: '50px'}} src={logo} />}>
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
Comme prévu, cela échoue avec:
Module not found: Can't resolve '*.svg' in 'some\path\src\components
Le contenu de images.d.ts
est standard:
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
J'ai trouvé quelques suggestions ailleurs qui mentionnent la modification de la configuration de Webpack. Il semble create-react-app
a caché des éléments de configuration de Webpack. Quelle est la meilleure pratique en la matière?
Ce que je fais normalement pour les actifs sous /public/assets
j'importe mes fichiers puis dans mes composants react en utilisant src je peux y accéder en utilisant process.env.PUBLIC_URL + '/assets/{ENTER REST OF PATH HERE}'
voici un exemple de code comment je l'implémente.
import React, { Component } from 'react';
const iconPath = process.env.PUBLIC_URL + '/assets/icons/';
export default class TestComponent extends Component {
constructor(props) {
super(props);
}
render(){
return (<img
src={`${iconPath}icon-arrow.svg`}
alt="more"
/>)
}
}
Voici le lien qui m'a permis de commencer à l'implémenter de cette façon. https://github.com/facebook/create-react-app/issues/2854
J'ai également remarqué que vous importez le logo de manière incorrecte et que vous devriez être import logo from '../images/logo.svg'
ou si logo.svg n'a pas de valeur d'exportation par défaut, vous devez utiliser import {logo} from '../images/logo.svg'
Vous pouvez utiliser l'importation ES6 pour localiser n'importe quel fichier (images, audio, etc.) du dossier racine et les ajouter à votre application.
import React from 'React'
import errorIcon from './assets/images/errorIcon.svg'
import errorSound from './assets/sounds/error.wav'
class TestComponent extends React.Component
{
render()
{
return (
<div>
<img src={ errorIcon }
alt="error Icon" />
<audio src={ errorSound } />
</div>
)
}
}