Gatsby Static Image(gatsby-plugin-image) inside MDX

Question

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:

react_devtools_backend.js:2557 Image not loaded https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300

When i try to implement this image inside .tsx it works so I'm wondering if it is possible or not.

gatsby-config

 "gatsby-remark-images",
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        defaultLayouts: {
          default: require.resolve("./src/components/common/Layout.tsx")
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {},
          },
        ],
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
      __key: "images",
    },

Then in test.mdx I'm trying to use Static Image like this:

<StaticImage
    src={'https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300'}
    alt={''}
    width={3840}
    height={1000}
    layout={'constrained'}
/>

Daven

Can you share the full test.mdx? – Selfrealization

@FerranBuireu prnt.sc/11x2tca only this code. Static Image is passed into MDXProvider – Daven

Answer 1

You can't use gatsby-plugin-image directly in an MDX document. This post on the Gatsby blog explains how to use it indirectly by passing in image reference props via your Frontmatter.

Personally I've been able to do it like so:

This example only loads local images, refer to the blog post for how to reference remote ones as it's more complex.

Template Component

import React from "react";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "../components/layout";

const Game = ({ data }) => {
  const { mdx } = data;
  const { frontmatter, body } = mdx;
  return (
    <Layout title={frontmatter.title}>
      <span className="date">{frontmatter.date}</span>
      <MDXRenderer localImages={frontmatter.embeddedImagesLocal}>
        {body}
      </MDXRenderer>
    </Layout>
  );
};

export const pageQuery = graphql`
  query($slug: String!) {
    mdx(slug: { eq: $slug }) {
      slug
      body
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        embeddedImagesLocal {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
`;

export default Game;

MDX Document

---
title: Death Stranding
author: Hideo Kojima
date: 2021-05-06
template: game
embeddedImagesLocal:
  - '../images/20210513035720_1.jpg'
---

import { getImage, GatsbyImage } from 'gatsby-plugin-image';

A great game from Hideo Kojima.

<GatsbyImage alt='Sam in a destroyed mall' image={getImage(props.localImages[0])} />

Expel

Answer 2

You can use the gatsby-remark-images plugin with gatsby-plugin-mdx and it handles the images for you.

Install the plugin, then in gatsby-config.js, update the gatsby-plugin-mdx to something like this:

{
  resolve: 'gatsby-plugin-mdx',
  options: {
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 900,
        },
      },
    ],
    plugins: [`gatsby-remark-images`]
  },
},

Then images work as expected using the ![alt](url) markdown format.

Unfortunately the maxWidth is fixed across the site which wasn't ideal for me. I'm using the @bonobolabs/gatsby-remark-images-custom-widths fork which lets you specify the image width in the MDX file with an HTML style img tag:

<img src="./image.jpg" alt="My image" width="500px"/>

I believe it's only 'width' that is the extra property this gives you.

Digital