Adding SVG and GIF into content

[ghost]

Summary

I'm looking to include images in .svg and .gif formats in Markdown files for the content. Seems they cannot be displayed using the configuration coming with this theme and its starter. I did some research and it seems I need to install gatsby-remark-copy-linked-files. However the documentation says this needs to be set up as a plugin of gatsby-transformer-remark, and I didn't find gatsby-transformer-remark in the theme or the starter. So what is the best practice to set up support for SVG and GIF?

Thanks in advance!!

Theme

@lekoarts/gatsby-theme-minimal-blog

[Boro23-wq]

I'm currently having trouble figuring that out too. I installed gatsby-remark-copy-linked-files and set it up on the gatsby-config file like so:

plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-copy-linked-files`],
      },
    },
...other configs
]

Doesn't seem to work either!

[LekoArts]

Hi!

This starter uses gatsby-plugin-mdx so the remark transformer isn't needed here. The plugin also accepts remark plugins, I also use them in the theme itself:

https://github.com/LekoArts/gatsby-themes/blob/4b6490bc1cc3234b5a2b5f794fae65057045bbb6/themes/gatsby-theme-minimal-blog-core/gatsby-config.js#L23-L48

You can set the mdx option to false in the configuration of gatsby-theme-minimal-blog: https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog#theme-options

This way the above code block will be disabled completely. Copy/paste the code (without the mdx check) inside your own gatsby-config.js and define gatsby-remark-copy-linked-files inside the gatsbyRemarkPlugins array of gatsby-plugin-mdx.

[ghost]

Thank you!

[kuzdogan]

I was trying to modify gatsby-plugin-mdx of the core theme, specifically wrapperStyle in gatsby-remark-images. This works out for me, thanks!

[alexeiva]

I followed these instructions, now images in mdx work for me. Thank you!

However, tables support in mdx no longer works. Any ideas what is causing the issue?

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              ignoreFileExtensions: [],
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1400,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },

this code no longer renders as usual after setting mdx to false

#####  Table
|  One | Two  |
| ------- | ------- |