React - 이미지 넣는 방법 3가지

1. css 클래스 네임 주고 background주기

 

2. html안에서 style속성으로 url 넣기

import bg from './bg.png'

function App(){
  return (
    <div>
      <div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
    </div>
  )
}

 

3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성)

<div className="col-md-4">
	<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
	<h4>상품명</h4>
	<p>상품정보</p>
</div>

 

4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당)

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

//권장되는 형식
<img src={process.env.PUBLIC_URL + '/logo192.png'} />

하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!