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'}.

먼저 src를 감싸십시오. {}

그렇다면 Webpack을 사용한다면; 대신에: <img src={"./logo.jpeg"} />

다음을 사용해야 할 수도 있습니다.

<img src={require('./logo.jpeg')} />

다른 옵션은 먼저 이미지를 다음과 같이 가져 오는 것입니다.

import logo from './logo.jpeg'; // with import

또는 ...

const logo = require('./logo.jpeg); // with require

그런 다음 연결하십시오 ...

<img src={logo} />

이미지 소스를 재사용하는 경우 특히이 옵션을 사용하는 것이 좋습니다.

가장 좋은 방법은 이미지를 먼저 가져온 다음 사용하는 것입니다.

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'} />

사용하는 require경우 사용해야 합니다webpack

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

두 가지 방법이 있습니다.

먼저

클래스 위에 이미지를 가져온 다음 다음 <img/>과 같이 요소 에서 참조하십시오.

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

둘째

직접 사용하여 이미지의 경로를 지정할 수 있습니다 require('../pathToImh/img')에 <img/>이런 요소

import React, { Component } from 'react'; 

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

내 대답은 기본적으로 Rubzen의 답변과 매우 유사합니다. 이미지를 객체 값 btw로 사용합니다. 두 가지 버전이 나를 위해 작동합니다.

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

또는

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

래퍼가없는 경우도 마찬가지입니다.

나는 또한 "가져 오기"솔루션을 확인했으며 경우에 따라 작동하지만 (React의 App.js 패턴에 적용되는 놀라운 것은 아니지만) 위와 같은 경우에는 그렇지 않습니다.

이것을 구현하는 다른 방법을 찾았습니다 (이것은 기능적 구성 요소입니다).

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

그것이 도움이되기를 바랍니다!

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

나는이 방법을 사용했고 작동합니다 ... 나는 당신이 유용하기를 바랍니다.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

기본 이미지 내보내기

주석에서 언급했듯이 이미지를 공용 폴더에 넣을 수 있습니다. 이것은 또한 Create-React-App 문서에서 설명합니다 : https://create-react-app.dev/docs/using-the-public-folder/