React : 이미지 처리

이미지 파일의 종류

 

 

이미지 용량에 따른 처리

※ 용량에 따른 처리

- 용량이 9.7KB보다 작을 경우 base64 인코딩을 통해 문자열 형태로 바꿔서 보여준다.

- 용량이 9.7KB보다 클 경우 별도의 가지고 있는 파일로 보여준다. (파일 경로 표시)

 

 

 

React에서 이미지 파일을 가져오는 방법

※ 폴더 구조

- case 1 : public 폴더 > img 폴더 > 이미지 파일들

- case 2 : src 폴더 > images 폴더 > 이미지 파일들

※ 소스 코드

※ 결과