React와 Next js 이미지 경로 여러가지 방법

 

Nextjs에서 이미지 경로는 어떻게 설정해야할까?

 

 

나의 경우는 public폴더내 images라는 폴더를 새로 생성하여 아이콘들을 넣어두었다.

nextjs에서는 public을 절대경로로 인식하고있는 것이 특징이다.

참고로 리액트에서는 배포시 src에있는 모든 파일들을 번들링(html, css, js를 압축)하지만 pubic은 압축하지않는다.

heart라는 아이콘을 꺼내기 위해 다음과 같이 경로를 설정하였다.

 

nextjs에서 권장하지않는 방법 do not!

 

<img src="/images/heart.png" alt=""></img>

 

배포시 public바로안에다할 경우 큰문제는없을수있지만 images처럼 만약 public안에 서브폴더를 이용할경우 뜻하지않게 경로를 인식하지못할수도있기때문에 환경변수 process.env를 활용하는것이 권장된다.(하단의 CRA 공식사이트 참고)

nextjs에서는 환경변수가 개발전이나 배포냐 테스트용이냐에따라 다양한것같아서 나중에 추가포스팅이 필요할것같다..

 

<img src={process.env.PUBLIC_URL + '/images/heart.png'} />

 

 

방법2

또한 Nextjs에서 제공하는 Image태그를 활용하면 css로 너비높이를 조정하지않아도 되서 편리하다.

 

import Image from 'next/image'
...
<Image src="/images/heart.png" alt="" width={10} height={5}/>

 

하지만 단점이 존재한다. 이미지를 따로 import하지않을경우 width와 height값을 반드시 두개다 입력해야한다. 그리고 컬러변경이 불가능하다.

 

import logo from '/public/blabla.png'
...
<Image src={logo} alt="blabla Logo" />

 

https://nextjs.org/docs/api-reference/next/image

next/image | Next.js

svg파일의 svgr사이트를 활용하면좋다고 추천을 받았다.

https://react-svgr.com/docs/configuration-files/

SVGR - Transforms SVG into React Components. - SVGR

 

svgr 문서에서 알려주는데로 설치후 웹팩설정을 간단히하면 jsx내에서 svg를 최적화하여 사용할 수있다.

 

import Onxrp from '/public/images/onxrp.svg';
<Onxrp style={{width:"40px", height:"40px"}}/>

 

방법 3

img태그를 div태그로 바꾸어 className을 설정한뒤 css에다가 이미지 삽입

 

.product-image{
	height : 300px;
  background-image : url('/images/heart.png');
  background-size : cover;
  background-position : center;
}

 

만약 이미지가 변경될여지가 있으면 방법4처럼 div태그에서 내부스타일에 개입할수있다.

 

방법4

jsx에서 이미지를 import해서 가져다 쓰는방법

 

import Heart from './images/heart.png'

...
      <div className="product-image" style={{ backgroundImage : `url(${Heart})` }}></div>
...

 

 

https://create-react-app.dev/docs/using-the-public-folder/

Using the Public Folder | Create React App