How to load images in your MDX blog

If you've followed my previous posts about adding a blog to an existing Gatsby site, you'll notice one thing: images don't load.

Thankfully this is pretty easy to fix, so let's do it:

Add a gatsby-source-filesystem entry for your images

First, we need to let know Gatsby about the existence of our pictures. I want the images to reside inside the src/blog/images folder and not in src/images (skip this step if you don't care about this).

gatsby-config.js
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog-images`,
path: `${__dirname}/src/blog/images`,
},
},

Add the gatsby-remark-images package

yarn add gatsby-remark-images

or

npm i gatsby-remark-images

And add it to your Gatsby config:

gatsby-config.js
...
`gatsby-remark-images`,
...

Configure gatsby-plugin-mdx

Next, we need to tell gatsby-plugin-mdx to use gatsby-remark-images, and this is done on your Gatsby config too:

gatsby-config.js
{
resolve: `gatsby-plugin-mdx`,
options: {
root: __dirname,
gatsbyRemarkPlugins: [
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 500,
linkImagesToOriginal: false,
},
},
],
},
},

Use them in your .mdx files

Once everything is ready, you should be able to include them like you would with .md files, using a relative path from the current .mdx you are writing on to the image:

some-mdx-file.mdx
...
![smart screen of death](./images/smart-screen.png)
....

You can check an example here

Latest posts

© 2021 Cesar Varela 👋 Thanks for visiting!