[React] 이미지 사용하기

리액트 앱에서 이미지를 사용하는 방법

public 폴더에 저장하여 상대경로로 접근

function Thumbnail() {
  const imageUrl = "/images/cat.png" // public 폴더 하위의 이미지 경로
  return <img className="thumbnail" src={imageUrl} alt="cat"></img>;
}

이미지를 public 폴더에 저장하는 경우 별도의 import 없이 바로 상대경로를 이용해 이미지를 가져올 수 있다. 이미지가 static file로 저장되기 때문이다.
.js 파일마다 import를 반복할 필요 없이 이미지를 간편하게 사용할 수 있는 것이 특징이다.

src 폴더에 저장하여 import 후 사용하기

import catUrl from "./images/cat.png" // src 폴더 하위의 이미지 경로 import

function Thumbnail() {
  return <img className="thumbnail" src={catUrl} alt="cat"></img>;
}

이미지를 src 폴더에 직접 저장하고, 해당 이미지의 상대경로를 import 하여 사용하는 방법도 있다.
src 폴더에 이미지를 저장할 경우 import 없이는 상대경로로 바로 접근할 수 없다.