[React] 이미지 넣기

목표

이미지 태그 사용법을 익힌다.

 

URL 지정하는 법

1. CSS에서 url을 지정한다.

  1) CSS

.main-bg{
  height: 400px;
  background-image: url('./img/apple.PNG');
  background-size: cover;
  background-position: center;
}

  2) App.js

<div className="main-bg"></div>

 

2. htm 태그 내에서 src 속성을 사용

import appleImagePath from './img/apple.PNG';

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

url 괄호 내부에 들어가는 경로를 입력해주기 위해 양단에 작음 따옴표와 덧셈 부호가 들어간다.

 

3. img 태그내 src 속성에 이미지 저장소 url 입력

<img src="https://abc~~~~.~~~/shop/shoes1.jpg" width="80%"/>

 

이미지 경로 설정법

1. public 폴더에 이미지가 있는 경우

process.env.PUBLIC_URL+"/logo192.png"

 

2. 프로젝트 폴더의 하위 폴더에 이미지가 있는 경우

'./img/apple.PNG'

img는 프로젝트 폴더 하위에 있는 폴더다

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌