[REACT] CRA에서 이미지 사용하는 법

https://create-react-app.dev/docs/adding-images-fonts-and-files/

Adding Images, Fonts, and Files | Create React App

 

 

프로젝트 중 src/images/ 안에 있는 이미지를 사용하려는데 이미지가 불러지지 않는다.

 

 

원래는 mainBackground 폴더 안에 있는 css 파일에서 백그라운드 이미지 속성을 사용해 이미지를 잘 사용하고 있었다.

 

 

상대 경로를 사용하여 이미지 파일을 잘 불러와서 사용했는데,

같은 경로를 사용하여 <img> 태그의 src에 넣으니 엑박이 떴다.

인터넷에서 정보를 잠깐 검색해 보니 리액트에서는

public 폴더에 있는지, src 폴더에 있는지, css 파일에서 쓰는지, CRA로 만든 리액트 앱인지 등등

많은 경우에 따라 경로 설정이나 사용법이 다른듯하다.

 

먼저 require()로 상대 경로 그대로 이미지를 불러올 수 있다.

 

 

node.js 환경이기 때문에 require()를 이용해서 파일을 불러오는 방식이다.

 

엑박이 뜨던 상대 경로를 require()로 감싸주니 이미지를 잘 불러온다.

 

인터넷 여러 정보에 따르면 require("경로").default 처럼 뒤에 .default를 붙여주라고 하던데,

 

나의 경우는 붙였더니 엑박이 뜨고 위에 이미지대로 require("경로")로 작성해야 이미지가 정상적으로 불러졌다.

 

 

추가 정보로

 

jsx 파일에서는 절대경로를 public 폴더를 기준으로 하고,

css 파일에서는 절대경로를 src 폴더를 기준으로 한다.

 

그리고 추가적으로 글 처음에 있는 CRA 공식 문서를 살펴 보았다.

 

한글 번역

 

먼저 import를 통해 파일로 만들어 사용할 수 있다고 한다.

 

 

기존에 가끔 사용하던 방식이다. 에러 없이 이미지를 잘 불러온다.

 

이렇게 하면 프로젝트가 빌드될 때 webpack이 이미지를 빌드 폴더로 올바르게 이동시키고

 

올바른 이미지 파일의 경로를 제공한다고 한다.