Gatsby: Is there a way to unwrap images generated by MDXRenderer

[zhenghaohe]

Summary

Relevant information

Is there a way to unwrap the images generated by MDXRenderer? Right it is always being wrapped inside a <p /> tag which makes it really hard to style the images. I attached a screenshot to describe.

I found that there is this plugin remark-unwrap-images(https://www.npmjs.com/package/remark-unwrap-images), which doesn't work on gatsby-plugin-mdx.

Environment (if relevant)

System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 83.0.4103.97
Firefox: 77.0
Safari: 13.1.1
npmPackages:
gatsby: ^2.3.25 => 2.16.5
gatsby-image: ^2.0.39 => 2.2.29
gatsby-plugin-feed-mdx: ^1.0.0 => 1.0.0
gatsby-plugin-google-analytics: ^2.0.18 => 2.1.23
gatsby-plugin-manifest: ^2.0.29 => 2.2.23
gatsby-plugin-mdx: ^1.2.14 => 1.2.14
gatsby-plugin-netlify-cms: ^4.0.0 => 4.1.25
gatsby-plugin-offline: ^2.0.25 => 2.2.10
gatsby-plugin-page-transitions: ^1.0.8 => 1.0.8
gatsby-plugin-react-helmet: ^3.0.12 => 3.1.13
gatsby-plugin-scroll-reveal: ^0.0.7 => 0.0.7
gatsby-plugin-sharp: ^2.0.35 => 2.2.32
gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
gatsby-plugin-styled-components: ^3.0.7 => 3.1.11
gatsby-plugin-typography: ^2.2.13 => 2.3.14
gatsby-remark-copy-linked-files: ^2.0.11 => 2.1.28
gatsby-remark-images: ^3.3.9 => 3.3.9
gatsby-remark-responsive-iframe: ^2.1.1 => 2.2.25
gatsby-remark-smartypants: ^2.0.9 => 2.1.14
gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2
gatsby-remark-vscode: ^1.0.4 => 1.2.1
gatsby-source-filesystem: ^2.0.29 => 2.1.33
gatsby-transformer-sharp: ^2.1.18 => 2.2.23
npmGlobalPackages:
gatsby-cli: 2.12.38

File contents (if changed)

gatsby-config.js:
plugins: [
{
resolve: gatsby-plugin-scroll-reveal,
options: {
threshold: 0.3, // Percentage of an element's area that needs to be visible to launch animation
once: true, // Defines if animation needs to be launched once
disable: false, // Flag for disabling animations

    // Advanced Options
    selector: "[data-sal]", // Selector of the elements to be animated
    animateClassName: "sal-animate", // Class name which triggers animation
    disabledClassName: "sal-disabled", // Class name which defines the disabled state
    rootMargin: "0% 50%", // Corresponds to root's bounding box margin
    enterEventName: "sal:in", // Enter event name
    exitEventName: "sal:out", // Exit event name
  },
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-feed-mdx`,
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/blog`,
    name: `blog`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/assets`,
    name: `assets`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [".mdx", ".md"],
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 590,
          showCaptions: true,
          linkImagesToOriginal: false,
          withWebp: true,
          backgroundColor: "red",
        },
      },
      {
        resolve: `gatsby-remark-responsive-iframe`,
        options: {
          wrapperStyle: `margin-bottom: 1.0725rem`,
        },
      },
      {
        resolve: `gatsby-remark-vscode`,
      },
      {
        resolve: `gatsby-remark-copy-linked-files`,
      },
      {
        resolve: `gatsby-remark-smartypants`,
      },
    ],
    plugins: [`gatsby-remark-images`],
  },
},
{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    // edit below
    // trackingId: `ADD YOUR TRACKING ID HERE`,
  },
},
{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `Gatsby Starter Blog`,
    short_name: `GatsbyJS`,
    start_url: `/`,
    background_color: `#ffffff`,
    theme_color: `#663399`,
    display: `minimal-ui`,
    // edit below
    icon: `content/assets/gatsby-icon.png`,
  },
},
{
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography`,
  },
},

],
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[mrmartineau]

@zhenghaohe remark-unwrap-images does work with the mdx plugin, here is an extract of my config:

const unwrapImages = require('remark-unwrap-images')

     {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        remarkPlugins: [
          unwrapImages,
        ]
      }

[pvdz]

@zhenghaohe did this resolve your question? Feel free to close the ticket if that's the case :)