[React] 리액트 이미지 파일 삽입 (컴포넌트와 절대경로)

리액트에서 이미지 파일을 일반 HTML에서 하듯이 넣으려고 하면
당연히 출력이 되지 않을 것이다

리액트에서는 다른 방법으로 이미지를 삽입해야 하는데 첫 번째 방법은 다음과 같다.

 

1. 컴포넌트 이용하기   

아래와 같이 이미지를 import 해서 src 경로에 따옴표를 이용하는 대신 { } 괄호 안에 import 해온 이름을 작성해 준다.

import lesson1 from '../../images/lesson1.jpg'; 

const FeaturedCard = (props) => {
  return <div>
	  <img src={lesson1} alt="online lesson" />
  </div>
}

export default FeaturedCard;

 

---

 

아주 간단한 방법이지만 절대 경로를 이용해야 하는 상황이 발생할 수 있다.

그럴 때는 또 그냥 html 처럼 사용하면 안되고 비슷하지만 우리는 require를 이용해야 한다. 

 

2. 절대 경로

아래와 같이 require 를 이용해서 작성하면 절대 경로를 이용해서 손쉽게 이미지 파일을 불러올 수 있다
하지만 아래 코드에서 만약 ${} 을 이용해서 동적으로 값을 불러오려 한다면 그것은 불가능하다! 

<img src={require('../images/about.svg').default} alt="React Logo" />

 

그럴 때는 그냥 { if else } 문을 이용해서 각각 따로 코드를 작성해 주는 방법으로 해결할 수 있다.