[React] Webpack 이미지 불러오기

file-loader

  - 웹팩으로 번들링 시 웹앱에 css, scss와의 폰트나 이미지 등의 타입의 파일이 있을 경우 해석하도록 해주는 loader다.

 

npm install --save-dev file-loader

로더 설치 후

 

webpack.config.js

 

rules: [
  //...
  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },

 

header.js

 

이미지 삽입하고자 하는 곳에 비슷하게 코드를 넣어주면 된다.

 

import React from 'react';

import niceLogo from '../assets/img/logo.jpg'; // 이미지로고
import niceLogoKor from '../assets/img/logokor.png'; // 이미지로고 한국어


function Header() {

	return (

  <header>
    	<span className="d-none d-lg-block">   
        	/* 해당위치에 이미지 삽입 */
        	<img className="niceLogo" src={ niceLogo} alt=""/>
            	<img className="niceLogoKor" src={ niceLogoKor} alt=""/>
	</span>
  </header> 

	);
}

export default Header;