리액트에서 이미지 넣기

1. import 구문 사용하기

1
import Logo from "./assets/img/Logo.png";

컴포넌트에서 import 구문을 사용하여 이미지를 불러올 수 있다.

이렇게 불러온 이미지는 img 태그의 src 속성에 할당한다.

1
2
3
4
5
6
7
function App() {
    return (
        <div>
            <img src={Logo} alt="Logo">
        </div>
    )
}

단, import는 React가 처리하지 않는다는 것을 명심해야한다. 이는 Webpack이나 vite같은 번들러들에 의해 처리된다.

2. public 폴더에 이미지 불러오기

1
2
3
public
|__images
    |__logo.png

다음과 같이 public 폴더에 images를 담아두고 public 폴더를 절대경로로 이미지를 불러올 수 있다.

1
2
3
4
5
6
7
function App() {
    return (
        <div>
            <img src="images/logo.png" alt="Logo">
        </div>
    )
}