[React] image 넣는 방법(jsx img, css background 이미지 경로)

 

react에서 jsx, css에 넣을 이미지 경로를 입력하는 방법

css background에 배경으로 넣거나 이미지 디렉토리를 src가 아닌 public에 보관하는 등 우리가 알고있는 평소의 html,css처럼 넣으려고 한다면 에러가 발생할 수 있다.

---

이미지 파일을 src에 배치할 경우

- jsx

이미지가 많아지면 코드가 길어져서 지저분하다. (비추)

import Image from './ImageName.jpg';
<img src={Image}>

- css

background: url(./ImageName.jpg);

우리가 알고있는 방식대로 이미지 경로를 넣어주면 된다.

 

이미지 파일을 public폴더 안에 넣기

절대 경로로 연결해주어야 한다.

- jsx

<img src="/ImageName.jpg">

- css

어쩔 수 없이 무조건 bg에 넣어주어야 한다 할때.. jsx내 태그안에 style 넣어주기

style={{background: 'url(/img/ImageName.jpg)'}}