React - 에셋 파일 불러오기

컴포넌트에서 불러오는 에셋의 경로

문제상황

function Header() {
  return (
    <header class="gnb">
      <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
      <button type="button" class="gnb__button" aria-label="음식점 추가">
        <img src="src/assets/assets/add-button.png" alt="음식점 추가"/>
      </button>
    </header>
  );
}

 

위와 같은 코드에서 이미지가 표시되지 않음

 

현재 폴더 경로

 

 

해결책

import "./App.css";
import add_button from "./assets/add-button.png";

function Header() {
  return (
    <header class="gnb">
      <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
      <button type="button" class="gnb__button" aria-label="음식점 추가">
        <img src={add_button} alt="음식점 추가"/>
      </button>
    </header>
  );
}

 

1. import (variable) from (path) 작성

2. <img src= ... > 의 경로를 {variable} 로 변경