목표

/content/blog/2019-09-29—xx/index.md 문서에서
포스팅 내용 중간에
동일 폴더 안의 이미지를 사용하고 싶다.

검색

gatsby.org 로 가서 markdown 검색 Working With Images in Markdown Posts and Pages 로 이동

이 페이지를 보면 위와 아래 내용이 다르다.

위쪽 내용은 index.md의 상단에 메타정보에 이미지 경로를 지정해 두고,
포스트의 메인 이미지로 사용하는 방법
아래 내용은 마크다운 문서 내에서 inline 으로 이미지를 사용하는 방밥이다.

해당 포스트는 2번에 해당

blog 내용에서 이미지 사용하기

참조
Inline images with gatsby remark images

1. plugin 설치

npm install --save gatsby-remark-images gatsby-plugin-sharp

gatsby 문서에는 gatsby-plugin-mdx 을 예시하였음
나는 gatsby-transformer-remark 를 사용함으로 예시를 gatsby-transformer-remark로 하겠음

2. gatsby-config.js

file system 내 파일을 사용한다는 설정. 초기에 이미 셋팅되어 있음.

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        gatsbyRemarkPlugins: [
          {            resolve: `gatsby-remark-images`,            options: {              maxWidth: 1200,            },          },        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`, // post 위치
      },
    },
  ],
}

3. index.md

블로그 내용  
...
![Awesome image](my-awesome-image.png)
...