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/
---
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.
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',
},
],
<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?
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'
}