반응 구성 요소에서 이미지 (.svg, .png)를 가져 오는 방법

Question

반응 구성 요소 중 하나에서 이미지 파일을 가져 오려고합니다. 나는

는 다음 구성 요소

import Diamond from '../../assets/linux_logo.jpg'; 

export class ItemCols extends Component { 
    render(){ 
     return (
      <div> 
       <section className="one-fourth" id="html"> 
        <img src={Diamond} /> 
       </section> 
      </div> 
     ) 
    } 
} 

여기에 내 프로젝트 구조의 내 코드의 웹 팩 프로젝트 설정을 가지고있다.

나는 다음과 같은 방법

{ 테스트 설정 내 webpack.config.js 파일이 : /.(jpg|png|svg)$/, 이 로더 : 'URL 로더 ' 옵션 : { 제한 : 25000, }, }, { 시험 : /.(jpg|png|svg)$/, 로더 :'파일 로더 ', 옵션 : { 이름 : '[경로] [이름]. [해시]. [확장]', }, },

PS. 다른 원격 소스에서 이미지를 가져올 수 있지만 로컬 저장된 이미지는 가져올 수 없습니다. 자바 스크립트 콘솔에서도 오류가 발생하지 않습니다. 제발 아무것도 도와주세요. 나는 반응이 새로 왔고 내가 뭘 잘못하고 있는지 찾을 수 없었다.

Answer 1

import mainLogo from'./logoWhite.png'; 
 

 
//then in the render function of Jsx insert the mainLogo variable 
 

 
class NavBar extends Component { 
 
    render() { 
 
    return (
 
     <nav className="nav" style={nbStyle}> 
 
     <div className="container"> 
 
      //right below here 
 
      <img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/> 
 
     </div> 
 
     </nav> 
 
    ); 
 
    } 
 
}