[React] 11. 이미지 넣기

1. App.css에서 이미지 넣기

background-image: url('이미지경로/이미지이름');

[이미지 경로]

src폴더에 이미지를 넣었을 때 : ./

src하위폴더에 이미지를 넣었을 때 :  ./하위폴더

 

 

2. App.js에서 이미지 넣기

    1) 상단에 import시키기

    import 불러올이름 from '이미지경로/이미지이름'

 

    2) return( 하단에 코드 쓰기

    <div>에서 이미지 쓸 경우 : <div style={{backgroundImage : 'url(' + 불러올 이름 + ')' }}/>

    <img>에서 이미지 쓸 경우 : <img src={불러올이름}/>

 

 

3. public 폴더 활용하기

    배포 전 build 작업(전 코드 압축)할 때 public 폴더에 있는 것은 그대로 보존됨.

    사용할 이미지가 많을 경우 import를 여러번 할 필요가 없어서 이미지를 여기에 보관하는 것이 편리.

   

<img src={process.env.PUBLIC_URL + '/이미지이름'}/>

    으로 써야 사이트 하위 카테고리에 사용된 이미지를 불러올 수 있음.