Javascript create react应用程序中的src/images文件夹

我使用

create react app

构建了一个应用程序框架。我希望文件夹结构如下所示：

src/
  components/
    CustomAppBar.js
  images/
    logo.svg
  App.js
  index.tsx
images.d.ts

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);

目前我想使用

CustomAppBar.js

中images文件夹中的

logo.svg

。当前，此文件如下所示：

src/
  components/
    CustomAppBar.js
  images/
    logo.svg
  App.js
  index.tsx
images.d.ts

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);

---

我在其他地方找到了一些建议，其中提到了修改Webpack配置。似乎

create-react-app

已经隐藏了Webpack-config内容。在这方面的最佳实践是什么？

我通常对

/public/assets

下的资产执行的操作我导入我的文件，然后在使用src的react组件中，我可以使用

process.env.public\u URL+'/assets/{在此处输入路径的其余部分}'

下面是我如何实现它的代码示例

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"
    />)
    }
}

import React，{Component}来自'React'；
const iconPath=process.env.PUBLIC_URL+'/assets/icons/'；
导出默认类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回（）
}
}

这是我开始以这种方式实现它的链接。

---

我还注意到您导入的徽标不正确，应该是从“../images/logo.svg”导入徽标，或者如果logo.svg没有导出默认值，您应该使用从“../images/logo.svg”导入{logo}

您可以使用ES6导入来定位任何文件（图像、音频等）从根文件夹中删除，并将其添加到应用程序中

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

从“React”导入React
从“./assets/images/errorIcon.svg”导入errorIcon
从“./assets/sounds/error.wav”导入errorSound
类TestComponent扩展了React.Component
{ 
render（）
{
返回(
)
}
}

谢谢，现在可以了。。。但我将拭目以待，看看是否有更清洁的解决方案。如果没有，我想我可以在助手函数中始终包装类似的内容。对我的答案进行了一些更新，希望这会更干净一些。我尝试了

。/images/logo.svg

导入，但也出现了一个错误。如果logo.svg没有导出默认值，则应该使用

导入{logo}从“../images/logo.svg”

如果我能看到logo.svg的内容，那将非常有帮助。你的最后一句话实际上就是答案。我对其进行了编辑，删除了

PUBLIC\u URL

的使用。使用正确的导入将包括缓存破坏的好处。如果我有多个图像，并且导入一个包含所有图像路径的对象数组，该怎么办？我不能为其他所有图像导入，对吗@匿名的