React_logo import하기

React

src 폴더의 로고 이미지를 가져와서 사용하는 방법을 알아보자.

src내 로고 이미지를 import한 다음, 이미지 태그의 src 프로퍼티의 값으로 {logo}을 넣어주면 logo 경로를 전달할 수 있다.

// src/components/Navbar.js

// Logo imported from src/images/logo.svg
import logo from '../images/logo.svg';

const Navbar = () => {
  return (
    <nav className='navbar'>
      <div className='nav-center'>
        <div className='nav-header'>
          <img src={logo} className='nav-logo' alt='backroads' />
          <button type='button' className='nav-toggle' id='nav-toggle'>
            <i className='fas fa-bars'></i>
          </button>
...
    </nav>
  );
};

export default Navbar;