[React] 리액트에서 로컬 이미지 불러오기!

 포켓몬 도감을 만들다가 이미지를 제대로 삽입했는데도 경로를 못 읽어와서 한참을 헤맸다. 답은 일반적인 html에서 작업할 때처럼 상대 경로를 주는 것이 아니라 아래처럼 public 폴더 내 이미지를 저장할 폴더를 따로 만들어 절대 경로로 설정하는 것이었다!

 

 이처럼 index.html이 들어 있는 public 폴더 내에 img 등 static 파일을 따로 모은다. 이렇게 모은 이미지 파일을 불러올 때는 절대 경로를 설정하면 성공적으로 불러와진다.

 

 위와 같이 불러온 이미지를 활용하여 css의 hover를 적절히 섞으면 아래와 같이 재미난(?) 효과를 구현할 수 있다.

 

 

 

 

 이 밖에 이미지를 불러오는 다양한 방법은 아래 블로그를 참조하길 바란다.

[코딩 이야기 님의 블로그]