create-react-app 中的 src/images 文件夹

Question

我有一个使用create-react-app搭建的应用程序框架。我希望文件夹结构如下：

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

目前我想在CustomAppBar.js中使用images文件夹中的logo.svg。 目前这个文件看起来像这样：

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

如预期的那样，这个操作失败了：

无法解析“some\path\src\components”中的“*.svg”：找不到模块。

images.d.ts 的内容是标准库:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'

我在其他地方找到了几个建议，提到修改Webpack配置。看起来 create-react-app 已经将Webpack配置隐藏起来了。在这种情况下，最佳实践是什么？

- codedog

Answer 1

在我的资产文件夹/public/assets下，我通常的做法是导入我的文件，然后在我的React组件中使用src，我可以使用process.env.PUBLIC_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"
    />)
    }
}

这是引导我开始采用这种方式实现的链接。 https://github.com/facebook/create-react-app/issues/2854

我还注意到您错误地导入了logo，正确的导入方式应该是import logo from '../images/logo.svg'，如果logo.svg没有默认的导出，您应该使用import {logo} from '../images/logo.svg'

- Joshua Fermin

---

谢谢，现在可以用了...但我会等待看看是否有更简洁的解决方案。如果没有，我想我总是可以将类似这样的东西封装在帮助函数中。 - codedog

我对我的答案进行了一些更新，希望现在更加清晰易懂。 - Joshua Fermin

我尝试了 ../images/logo.svg 的导入，但也引发了错误。 - codedog

如果 logo.svg 没有导出默认值，那么你应该使用 import {logo} from '../images/logo.svg'。如果我能看到 logo.svg 的内容，这将非常有帮助。 - Joshua Fermin

你上一句话其实就是答案。我已经编辑过了，去掉了PUBLIC_URL的使用。使用正确的导入方式将包含缓存破坏的好处。 - codedog

除了使用公共URL或在图像数组中逐个导入每个图像之外，还有其他方法吗？ - Akhila

Answer 2

你可以使用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>
        )
    }
}

- anonym

---

如果我有多张图片，并且我正在导入一个包含所有图像路径的对象数组，那该怎么办？我不能为每个其他图像都进行导入，对吧？@anonym - Akhila