리액트 이미지 가져오는 법

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

function App() {

  return (
    <div className="App">
      {/* <Header></Header>
      <Main></Main>
      <Footer></Footer> */}

      // <img src="./images/img01.jpg" alt="" />
      <img src={img02} alt="" />
      <img src={require('./images/img03.jpg')} alt="" />
      <img src={process.env.PUBLIC_URL + 'images/img04.jpg'} alt="" />
    </div>
  );
}

저렇게 4가지 방법,

아니 첫번째 저렇게 가져오는 건 문제.

걍 html에서 쓰듯이 하면 안됨.

 

저거 빼고 아래 3개

import 해서 가져오거나

아예 reqire 해서 가져오거나.

 

근데 그냥 public 폴더에 images 폴더 만들어서,

거기서 가져오는 게 좋음.

 

process.env는 환경변수들 있는 객체인데,

거기서 PUBLIC_URL 이 public 폴더 url임.