[React] 리액트 이미지 경로 지정방법 2가지

1. import를 사용한 이미지 불러오기

이미지 파일을 직접 가져와 사용하는 방법이다. 주로 컴포넌트 파일과 같은 위치에 이미지 파일이 있을 때 사용된다.

import React from "react";
import logo from "./assets/logo.png"; // 이미지 파일 경로

function App() {
  return (
    <div>
      <img src={logo} alt="Logo" />
    </div>
  );
}

export default App;

2. public 폴더에 이미지 저장 후 상대 경로 사용

public 폴더에 이미지를 저장하고 상대 경로를 사용하는 방법이다. public 폴더에 있는 파일들은 빌드 시 그대로 복사되므로, 직접 경로를 지정하여 접근할 수 있다.

import React from "react";

function App() {
  return (
    <div>
      <img src="/logo.png" alt="Logo" />
    </div>
  );
}

export default App;