[React] 이미지 태그 절대경로로 쉽게 넣는 방법 (process.env)

문제

우리가 웹에 이미지를 넣을 때, <img src="./public/assets/image1.png" alt="이미지"> 이런 식으로 이미지 태그를 사용하는 게 일반적이다. 하지만, 리액트에서는 간혹 상대 경로로 이미지를 불러올 때 이미지가 불러와지지 않는 문제가 생길 수 있다. 이럴 때는 절대경로를 이용해서 이미지를 쉽게 넣어주면 해결이 가능하다.

 

방법

const Home = () => {
    return <div>
        <img src={process.env.PUBLIC_URL + '/assets/image.jpg'} />
    </div>
}

export default Home;

process.env.PUBLIC_URL은 리액트의 public 폴더의 절대 경로를 잡아주는 역할을 한다.

'+' 뒤로 public 폴더의 경로를 입력하기만 하면 해당 이미지의 절대 경로를 이용해서 쉽게 이미지를 불러올 수 있다.

(한 가지 주의할 점은 불러오는 이미지의 경로가 반드시 public 폴더 안에 존재해야 한다는 점이다.)

 

응용

const Item = ({ id }) => {
    return <div>
        <img src={process.env.PUBLIC_URL + `/assets/image${id}.jpg`} />
    </div>
}

export default Item;

Item이라는 컴포넌트가 있다. 이 컴포넌트는 map() 함수를 통해 생성된 데이터의 수만큼 출력될 예정이다.

id는 데이터마다 받는 값이 다르고, id마다 image가 모두 다르다고 가정할 때 위의 코드처럼 사용할 수 있다.

 

const env = process.env;
env.PUBLIC_URL = env.PUBLIC_URL || "";

제대로 불러왔는데도 이미지가 안 뜨는 경우가 있을 수 있다. 그럴 땐, 위의 코드를 코드 상단에 작성해주면 이미지가 정상적으로 뜨는 것을 확인할 수 있을 것이다.

 

1. img src={process.env.PUBLIC_URL + 'assets/image.jpg'}