[React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

 

React에서 이미지를 삽입하는 방법은 3가지가 있다.

 

1. css파일 내에서 이미지 접근할 때

//App.css
background-image: url('이미지 경로');

css 파일에서 이미지의 url 경로 혹은 src폴더 내의 이미지 파일을 가져오고 싶을 때

url()에 이미지 경로를 삽입하면 된다.

 

 

2. html 파일 내에서 src폴더 내 이미지에 접근할 때 (2가지)

//App.js

import image1 from './image.png'

function App(){
  return(
    <>
      ...
      
      <div className="image1" style={{ backgroundImage : 'url(' + image1 + ')' }}></div>
      <img className="image2" src={image1}/>
    </>
  )
}

(1) " import 이미지이름 from 경로 "를 통해서 먼저 이미지를 가져온다. (경로는 ./로 시작)

(2-1)  style={ {backgroundImage: 'url(' + 이미지이름 + ')' } }

(2-2) img 태그 사용 시 : <img src={ 이미지이름 }/>

 

 

3. public 폴더에서 가져올 때

1) public폴더의 역할

React App을 완성한 후 배포를 위해 build를 하면 한 파일로 압축을 한다.

이때 public폴더는 압축되지 않고 형태를 그대로 유지한다.

 

따라서 수정이 필요하지 않은 static파일(이미지, json, 텍스트 등)은 public 폴더에 저장해도 된다.

 

2) public폴더의 이미지 가져오기

<img src={process.env.PUBLIC_URL + '/경로'} />

위와 같은 형식으로

process.env.PUBLUC_URL + '/경로' 를 이용해 이미지를 가져올 수 있다.

 

만약 메인 URL에 이미지를 가져올 때는 '/경로'만으로도 가져올 수 있지만

endpoint가 추가될 경우 브라우저에서 이미지를 가져올 때 파일을 찾지 못할 수 있기 때문에

process.env.PUBLUC_URL을 붙여주는 것이 권장되는 방법이다.

 

 

 

---

<img>태그 css속성

1) 요소 내 이미지 크기(object-fit) https://developer.mozilla.org/ko/docs/Web/CSS/object-fit

 

fill - 요소 콘텐츠 박스에 맞추기

contain - 비율 유지&박스 내에 들어가도록 조정

cover - 비율 유지&박스 가득 채우기

scale-down - none, contain 중 콘텐츠 크기가 작아지는 것

 

 

2) 요소 내 박스 위치(object-position) https://developer.mozilla.org/ko/docs/Web/CSS/object-position

 

수치 적용시 : 좌|우 상|하

ex) object-position: 0px 0px; (left top)