[reactjs] React에서 로컬 이미지를 어떻게 참조합니까?

로컬 디렉토리에서 이미지를로드하고 reactjs img src태그에 포함 시키려면 어떻게해야 합니까?

나는라는 이미지가 one.jpeg내 구성 요소와 동일한 폴더 안에을하고 난 둘 다 시도 <img src="one.jpeg" />하고 <img src={"one.jpeg"} />내 내부 render기능을하지만 이미지가 표시되지 않습니다. 또한 webpack config공식 create-react-app명령 줄 util을 사용하여 프로젝트를 만들었 으므로 파일에 액세스 할 수 없습니다 .

업데이트 : 처음으로 이미지를 가져 와서 import img from './one.jpeg'내부 img src={img}에서 사용하는 경우 작동 하지만 가져올 이미지 파일이 너무 많아서 형식으로 사용하고 싶습니다 img src={'image_name.jpeg'}.

답변

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

<img src={'path/to/one.jpeg'} />

<img src={require('path/to/one.jpeg')} />

<img className="img-fluid"
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`}
     alt="logo"/>

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" />
  }
} 

import React, { Component } from 'react';

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" />
  }
}

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,