create-react-app中的src / images文件夹 [英] src/images folder in create-react-app

问题描述

我有一个使用 create-react-app 搭建的应用。我想要这样的文件夹结构：

I have an app scaffolded using create-react-app. I would like to have the folder structure like this:

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

当前，我想在 CustomAppBar中的images文件夹中使用 logo.svg .js 。当前，该文件如下所示：

Currently I would like to use the logo.svg in the images folder in CustomAppBar.js. Currently this file looks like this:

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

如预期的那样，此操作失败并显示：

As expected, this fails with:

未找到模块：无法解析某些\path\src\组件中的'* .svg'

images.d.ts 的内容是普通标准：

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

我在其他地方发现了一些修改Webpack配置的建议。似乎 create-react-app 隐藏了Webpack配置内容。

I have found a couple of suggestions elsewhere that mention modifying Webpack config. It seems create-react-app has hidden away Webpack config stuff. What's the best practice when it comes to this?

推荐答案

对于 / public以下的资产，我通常会做什么？ / assets 导入文件，然后使用src在我的react组件中，我可以使用 process.env.PUBLIC_URL +'/ assets / {在此处输入路径}'

What I normally do for assets under /public/assets i import my files then in my react components using src i can access them using process.env.PUBLIC_URL + '/assets/{ENTER REST OF PATH HERE}'

这是我如何实现的代码示例。

here is a code sample how I implement it.

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

Here is the link that got me started implementing it this way. https://github.com/facebook/create-react-app/issues/2854

我还注意到您导入的徽标不正确，应该是从'../images/logo导入的徽标。 .svg'或如果logo.svg没有导出默认值，则应使用<.c.c.c.c.cg。

I also noticed you are importing logo incorrectly and should be import logo from '../images/logo.svg' or if logo.svg does not have an export default you should be using import {logo} from '../images/logo.svg'

这篇关于create-react-app中的src / images文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！