web-dev-qa-db-ja.com

create-react-appのsrc / imagesフォルダー

create-react-appを使用してアプリをスキャフォールディングしました。次のようなフォルダ構造にしたいと思います。

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

現在、logo.svgの画像フォルダにあるCustomAppBar.jsを使用したいと思います。現在、このファイルは次のようになっています。

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

予想通り、これは失敗します：

Module not found: Can't resolve '*.svg' in 'some\path\src\components

images.d.tsのコンテンツは標準在庫です。

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

Webpack構成の変更について言及している他の提案をいくつか見つけました。 create-react-appはWebpackの設定を隠しているようです。これに関して、ベストプラクティスは何ですか？

javascriptreactjswebpackcreate-react-app
7
codedog

/public/assetsの下のアセットに対して通常行うこと私は自分のファイルをインポートしてから、srcを使用して自分のreactコンポーネントでprocess.env.PUBLIC_URL + '/assets/{ENTER REST OF PATH HERE}'を使用してそれらにアクセスできます

ここに私がそれを実装する方法のコードサンプルがあります。

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

ロゴのインポートが正しくなく、import logo from '../images/logo.svg'である必要があることにも気づきました。logo.svgにエクスポートのデフォルトがない場合は、import {logo} from '../images/logo.svg'を使用する必要があります

11
joshua fermin

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