[React] 이미지 파일 사용하기

보통 이미지 파일을 사용을 하려면 img 태그를 사용하는데

<img src={경로} alt=""></img>
<img src="경로" alt=""></img>

이렇게 두 가지 방식으로 사용합니다.

 

첫 번째 방식

import 사용이름(파일명) from 경로;

function ImgComp () {
  return (
    <img src={사용이름} alt=""></img>
  )
}

위 방식은 이미지 하나하나 import를 해야 하기 때문에 사용하는 데 있어서 불편함을 야기할 수 있습니다.

 

두 번째 방식

function ImgComp(){
  return(
    <img src="경로/파일명" alt=""></img>
  )
}

위 방식은 대게 public 폴더에 이미지를 저장하는 경우 사용하는데요. 이때 사용되는 경로는 root 기준으로 작성해야 합니다. 때문에 경로를 작성할 때 상대경로로 작성하는 경우 이미지가 안 나올 수 있으니 process.env.PUBLIC_URL를 이용하여 우리가 배포한 실제 경로인 root로 조금 더 안정적으로 파일 경로를 작성해 줄 수 있습니다.

예시 ) src ={`${process.env.PUBLIC_URL}/asset/img/coffee1.png`} == https://메인주소/asset/img/coffee1.png

 

두 가지 방식은 이미지 위치에 따라 선택할 수 있는데요.

첫 번째 방식은 이미지 파일이 src폴더 내에 존재하는 경우 사용할 수 있고

두 번째 방식은 이미지 파일이 src폴더 외에 존재하는 경우에 사용할 수 있습니다.

 

❗src폴더 외에 이미지가 존재하는데 import 방식으로 사용하면 나타나는 에러

Module not found : Error : You attempted to import ../public/asset/img/coffee1.png 
which fallls outside of the project src/ directory. Relative imports outside of src/ are
not supported.