[React] react 이미지 경로

react는 src폴더 내에 위치한 이미지와 public 폴더 내에 위치한 이미지의 경로 설정이 다르다.

 

src 폴더 내에 있으면 변수로 지정해서 사용

import img1 from './images/img1.jpg';
import img2 from './images/img2.jpg';
import img3 from './images/img3.jpg';

const Images = () => {
  return (
    <>
      <img src={img1} />
	  <img src={img2} />
	  <img src={img3} />
    </>
  );
};

export default Images;

 

public 폴더 내에 있으면 폴더에 접근하기 위해 PUBLIC_URL을 사용.

 

const Images = () => {
  // src폴더 안쪽에서 public폴더까지의 경로를 구하는 구문
  const path = process.env.PUBLIC_URL;
  return (
    <>
      <img src={path + '/images/img1.jpg'} />
      <img src={path + '/images/img2.jpg'} />
      <img src={path + '/images/img3.jpg'} />
    </>
  );
};

export default Images;