title: Gatsby Static Image(gatsby-plugin-image) inside MDX
body: <p>Recently I have started working with Gatsby and right now I'm trying things with MDX, In my MDX file i can work with Gatsby Image throught GraphQL, but I want to use Static Image from gatsby-plugin-image and I'm getting errors like this:</p>
  <blockquote>
  <p>react_devtools_backend.js:2557 Image not loaded
  <a href="https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300" rel="noreferrer">https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300</a></p>
  </blockquote>
  <p>When i try to implement this image inside .tsx it works so I'm wondering if it is possible or not.</p>
  <p><strong>gatsby-config</strong></p>
  <pre><code> &quot;gatsby-remark-images&quot;,
      {
        resolve: &quot;gatsby-plugin-mdx&quot;,
        options: {
          defaultLayouts: {
            default: require.resolve(&quot;./src/components/common/Layout.tsx&quot;)
          },
          gatsbyRemarkPlugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {},
            },
          ],
        }
      },
      {
        resolve: &quot;gatsby-source-filesystem&quot;,
        options: {
          name: &quot;images&quot;,
          path: `${__dirname}/src/images/`,
        },
        __key: &quot;images&quot;,
      },
  </code></pre>
  <p>Then in test.mdx I'm trying to use Static Image like this:</p>
  <pre><code>&lt;StaticImage
      src={'https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300'}
      alt={''}
      width={3840}
      height={1000}
      layout={'constrained'}
  /&gt;
  </code></pre>