Gatsby Markdown Inline Images

user_641562 0
Viewed 172

So I am trying to figure out how to render my images that are inline to my blog post. I do have a featured image up top that works but cannot figure out how to get inline images.

Images are stored in src/images/

office-upgrade.md

---
title: "Office Upgrade"
image: ../images/office1.jpg
featured: false
author:
  name: "jrock2004"
date: "2017-08-06"
tags:
  - general
---

So, when I moved into our new house 3 yrs ago, my only requirement was I have my own office. In my last house I was stuck in the basement. When I made videos, I would get the jokes about living in my moms basement. As you can see, all the cords where just all over the place. It was just so bad.

![Nightmare Cable Management](../images/office2.jpg)

Gatsby-config.md

  plugins: [
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: `${__dirname}/src/images/`,
      },
      __key: 'images',
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: './src/pages/',
      },
      __key: 'pages',
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/src/posts/`,
      },
      __key: 'posts',
    },
  ],

component/post/index.tsx

<article className={`markdown mt-12 mx-auto ${image && 'w-11/12'}`}>
  <MDXProvider components={components}>
    <MDXRenderer>{body}</MDXRenderer>
  </MDXProvider>
</article>

When I look at DOM, this is what is rendered

<img src="images/office2.jpg" alt="Nightmare Cable Management">

What am I doing wrong here?

gatsby-image gatsby
1 Answers

The image under images/office2.jpg is automatically rendered because it's under the body of the markdown. When you do:

<MDXRenderer>{body}</MDXRenderer>

Automatically it renders everything inside.

As you said, you have access to each separate markdown node (title, image, featured, etc) but you lose control over body elements.

MDXProvider provides a bunch of customization components to refine and override the default rendering behavior:

import { MDXProvider } from "@mdx-js/react"

const YourH1 = props => <h1 style={{ color: "tomato" }} {...props} />
const YourParagraph = props => (
  <p style={{ fontSize: "18px", lineHeight: 1.6 }} {...props} />
)
const YourImg = props => <figure><img src={props.url} alt={props.alt}></img><figcaption{props.title}/figcaption></figure>


const components = {
  h1: YourH1,
  p: YourParagraph,
  img: YourImg
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

As you can see, this is wrapping the gatsby-ssr.js and the gatsby-browser.js APIs and it allows your to customize the image component.

MDXProvider image, yields the following props:

{
  type: 'image',
  url: 'https://example.com/favicon.ico',
  title: 'bravo',
  alt: 'alpha'
}

Source: https://github.com/syntax-tree/mdast#image

user_55853710
Related