public, src 이미지 사용 시 경로, 사용법

React 에서 이미지 파일 사용하기

• JSX에서 src폴더 내의 이미지를 사용하려면 상단에서 미리 import 해야 한다.
• public 폴더 내의 자료들은 절대경로로 자유롭게 사용할 수 있다.
• CSS 내에서 사용할때는 기존처럼

 

 

JSX 안에서 src 폴더의 이미지 사용

미리 import 해야 한다

import bg from './bg.png'

function App () {
    return (
        <div>
            <div className="main-bg" style={{ backgroundImage: `url(${bg})` }}></div>
            <img src={bg} />
        </div>
    )
}

 

JSX 안에서 public 폴더의 이미지 사용

절대 경로로 사용한다.

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

권장방법

하지만 아래와 같은 방식이 권장된다.

왜냐하면 배포 시 root가 아닌 특정 폴더 내에 배포할 경우 경로에 문제가 발생할 수 있다.

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