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

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

---

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

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

업데이트 : 처음으로 이미지를 가져와 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')} />

---

이미지를 가져 오는 가장 좋은 방법은 ...

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

---

내 대답은 기본적으로 Rubzen의 대답과 매우 유사합니다. 이미지를 객체 값 btw로 사용합니다. 두 가지 버전이 저에게 효과적입니다.

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

또는

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

래퍼없이-그러나 그것은 다른 응용 프로그램이기도합니다.

나는 또한 "가져 오기"솔루션을 확인했고 거의 작동하지 않는 경우도 있지만 (놀랍지 않은 것은 React의 App.js 패턴에 적용됨) 위의 경우에는 그렇지 않습니다.

---

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

기본 이미지 내보내기

---

내부 공용 폴더 생성 자산 폴더 및 장소 이미지 경로 따라.

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

참고URL : https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react