gatsby: gatsby-remark-images in MDX doesn't generate base64 placeholders

Description

Using gatsby-remark-images in MDX (see this guide) doesn’t generate a base64 placeholder.

➡️ demo repo ⬅️ ➡️ live example ⬅️

Steps to reproduce

1. create a new default gatsby site gatsby new gatsby-image-with-mdx
2. cd gatsby-image-with-mdx
3. install mdx and gatsby-remark-images yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-remark-images
4. configure the plugin and filesystem source in gatsby-config.js:

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 600,
            },
          },
        ],
      },
    },
    // source posts 
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },

1. create a post at /src/posts/testing-gatsby-image/index.mdx:

---
slug: testing-gatsby-image
---

# Testing gatsby-image in MDX

![An image](./image.png)

1. Drop any image in the same directory (copy the astronaut for example) and rename it image.png
2. Implement a simple gatsby-node.js:

const path = require("path")
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    resolve(
      graphql(
        `
          {
            allMdx {
              edges {
                node {
                  id
                  frontmatter {
                    slug
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        // handle errors
        if (result.errors) {
          console.error(result.errors)
          reject(result.errors)
        }

        // create posts pages
        result.data.allMdx.edges.forEach(({ node }) => {
          createPage({
            // slug generated with createNodeField
            path: node.frontmatter.slug,
            // post template
            component: path.resolve(`./src/templates/post.js`),
            // pass id as context
            context: { id: node.id },
          })
        })
      })
    )
  })
}

1. Add a template at /src/templates/post.js:

import React from "react"
import { graphql } from "gatsby"
import MDXRenderer from "gatsby-plugin-mdx/mdx-renderer"

const PostTemplate = ({ data }) => <MDXRenderer>{data.mdx.body}</MDXRenderer>

export const POST_QUERY = graphql`
  query POST_QUERY($id: String) {
    mdx(id: { eq: $id }) {
      body
    }
  }
`

export default PostTemplate

1. run gatsby develop
2. navigate to http://localhost:8000/testing-gatsby-image
3. inspect the image

Expected result

The generated markup should include a base64 placeholder image for the “blur up” effect, like when using gatsby-remark-images with gatsby-transformer-remark.

Actual result

Generated markup:

<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px;">
  <span class="gatsby-resp-image-background-image" style="padding-bottom: 100%; position: relative; bottom: 0px; left: 0px; background-size: cover; display: block;"></span>
  <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; box-shadow: white 0px 0px 0px 400px inset;" alt="An image" title="" src="/static/6d91c86c0fde632ba4cd01062fd9ccfa/34e8a/image.png" srcset="/static/6d91c86c0fde632ba4cd01062fd9ccfa/d4214/image.png 150w,/static/6d91c86c0fde632ba4cd01062fd9ccfa/135ae/image.png 300w,/static/6d91c86c0fde632ba4cd01062fd9ccfa/34e8a/image.png 600w,/static/6d91c86c0fde632ba4cd01062fd9ccfa/8ff1e/image.png 800w" sizes="(max-width: 600px) 100vw, 600px">
</span>

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-4260U CPU @ 1.40GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
  Languages:
    Python: 2.7.15+ - /usr/bin/python
  Browsers:
    Chrome: 67.0.3396.87
    Firefox: 67.0.2
  npmPackages:
    gatsby: ^2.10.0 => 2.10.0
    gatsby-image: ^2.2.1 => 2.2.1
    gatsby-plugin-manifest: ^2.2.0 => 2.2.0
    gatsby-plugin-mdx: ^1.0.5 => 1.0.5
    gatsby-plugin-offline: ^2.2.0 => 2.2.0
    gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
    gatsby-plugin-sharp: ^2.2.1 => 2.2.1
    gatsby-remark-images: ^3.1.0 => 3.1.0
    gatsby-source-filesystem: ^2.1.0 => 2.1.0
    gatsby-transformer-sharp: ^2.2.0 => 2.2.0
  npmGlobalPackages:
    gatsby-cli: 2.7.0