React 이미지를 넣는 방법

 

#1 src 폴더에 파일이 있을 경우

1) css에 background로 적용하는 방법

  일반적인 css 적용 방법과 동일.

(App.css)

.logo {
  background-image : url('./logo.png');
}

 

2) html 내부에서 적용하는 방법

  import [이름] from [경로]를 적은 후, 

  이미지를 삽입하고 싶은 위치에 img src = {} 태그를 사용

(App.js)

import logo from './logo.png'

function App(){
  return (
    <div>
      <img src={ logo } / >
    </div>
  )
}

 

 

#2 public 폴더에 파일이 있는 경우

 

  그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다.

<img src='/logo.png' />

 

  하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 같은 환경변수를 이용하여 절대 경로로 사용한다.

<img src={process.env.PUBLIC_URL + '/logo.png'} />