[React] Img 태그를 사용한 이미지 추가

React에 이미지를 추가하는 방법은 다음과 같다.
1. import 사용
2. require() 사용

---

1. import 사용하여 컴포넌트에 이미지 추가하기

React에서는 다음과 같은 import 형식으로 이미지를 추가하고 불러올 수 있다.

import 이미지변수명 from '이미지파일경로'
//...//
<img src={이미지변수명} />

width, height, alt를 추가하고 싶다면 다음과 같이 작성하면 된다.

<img src={이미지변수명} width='숫자' height='숫자' alt='이미지설명' />

예시

import LogoImg from './logo.jpg';
//...//
<div>
	<img src={LogoImg} width='150' height='45' />
</div>

노란색으로 동그라미 친 부분이 추가된 모습이다.

이미지를 추가하면서 발생한 경로 오류
상단에서 import를 사용하여 이미지 자체를 불러오거나
css파일에서 backgound-image로 사용할 경우
이미지 파일의 위치가 src 폴더 아래에 꼭 위치해야 한다.