[Gatsby] 개츠비에 이미지 올리기 ft 플러그인

개츠비 설치와 프로젝트 생성을 안했다면

-> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기

 

 

이미지 그냥 올리면 안되나?

개츠비는 기본적으로 이미지를 어떻게 처리할줄 몰라한다고 한다.

이미지를 올리고 싶으면 밑의 플러그인 4가지를 깔아줘야 한다.

 

비주얼 스튜디오 코드에서 밑의 명령어를 이용해 설치하면 된다.

 

gatsby-transformer-remark: 개츠비에서 마크다운을 사용할 수 있게 해준다 [ 주인공 ]

gatsby-plugin-sharp: 개츠비 플러그인으로 이미지를 처리하는데 도와준다.

gatsby-remark-images: 마크다운(markdown)문서에서 이미지를 사용할 수 있게 해준다.

gatsby-remark-relative-images: 파일에서 이미지 위치를 찾아준다.

 

이렇게 4개 한번에 사용가능하다.

npm install gatsby-transformer-remark gatsby-plugin-sharp gatsby-remark-images gatsby-remark-relative-images

 

 

gatsby-config.js에 추가

설치한 플러그인을 gatsby-config.js에 추가해줘야 된다.

gatsby-plugin-sharp은 그냥 String으로 들어가면되고

 

나머지는 gatsby-transformer-remark의 지휘속으로 들어간다.

 

maxWidth: 750 은 최대 크기 750으로 제한 해주는 것

linkImagesToOriginal: false 는 이미지 클릭시 이미지 주소 페이지로 이동되는걸 막아준다.

이렇게 gatsby-remark-images에서 이미지에 옵션을 정해줄 수 있다.