💦 마크다운 이미지가 안보여요,,

---

🧐 첫번째 의심

이미지 경로가 안맞아서 그런듯

리액트는 빌드된 결과물이 public 폴더에 생성이 된다.

글고 이 public이 배포가 되게 되는 것이다!

그래서 public 폴더내에 이미지 경로를 이용해서 마크다운을 작성해주면 사진이 잘보인다!!

![cry.jpeg](../static/cry-3d0c621f81066b1b8d0a3d209dd28f76.jpg)

근데 내가 매번 static 파일에 어떻게 들어가나 확인을 할 수가 없으니까 이결 해결을 해야하는데 아직 못했다..^^

gastby-config.js 를 아래와 같이 고치니까 수정되었다.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
    siteMetadata: {
        title: `my-portfolio`,
        siteUrl: `https://www.yourdomain.tld`,
    },
    plugins: [
        'gatsby-plugin-postcss',
        `gatsby-plugin-image`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: ['.mdx', '.md'],
                gatsbyRemarkPlugins: [
                    {
                        resolve: `gatsby-remark-highlight-code`,
                        options: {
                            terminal: 'carbon',
                            theme: 'blackboard',
                        },
                    },
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 590,
                        },
                    },
                ],
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/content/posts`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/content/posts/images`,
            },
        },
    ],
};

 `gatsby-plugin-image`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: ['.mdx', '.md'],
                gatsbyRemarkPlugins: [
                    {
                        resolve: `gatsby-remark-highlight-code`,
                        options: {
                            terminal: 'carbon',
                            theme: 'blackboard',
                        },
                    },
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 590,
                        },
                    },
                ],
            },
        },

위의 코드와 같이 불러와줘야 이미지가 잘 들어옵니다,,

mdx를 사용하는 것으로 바뀌면서 remark와 관련된 플러그인들은 위와 같이 써줘야 적용이 된다고 합니다!

참고로 기존 코드는 아래와 같이 작성했었습니다ㅠㅠ

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
    siteMetadata: {
        title: `my-portfolio`,
        siteUrl: `https://www.yourdomain.tld`,
    },
    plugins: [
        'gatsby-plugin-postcss',
        `gatsby-plugin-mdx`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                extensions: [`mdx`, `md`],
                name: `posts`,
                path: `${__dirname}/content/posts`,
            },
        },
        `gatsby-plugin-image`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`, // 정적 이미지를 저장할 디렉토리 이름
                path: `${__dirname}/content/posts/images`, // 이미지 파일이 저장된 디렉토리 경로
            },
        },
        'gatsby-plugin-sharp',
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 800, // 이미지 최대 너비
                            linkImagesToOriginal: false,
                            backgroundColor: 'transparent', //수정
                        },
                    },
                ],
            },
        },
    ],
};

✔ 다시 보니까 잘못된점!
이미지 관련된 플러그인들을 따로 불렀던것