Outline
We've got banner images in our Markdown files, but we're not able to use the normal Markdown image syntax:
We need to do a little set-up to make this happen.
First, we'll install gatsby-remark-images:
npm install --save gatsby-remark-images
As you might guess, we need to configure this plugin in gatsby-config.js. We need to update gatsby-plugin-mdx like so:
// gatsby-config.js
plugins: [
// other plugins remain the same
// replace gatsby-plugin-mdx config with the following:
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
defaultLayouts: {
default: require.resolve("./src/pages/markdownpage-template.js"),
},
plugins: [`gatsby-remark-images`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 400,
},
},
],
},
},
]
Note that, for now, we needed to add that extra plugins array inside fo gatsby-plugin-mdx. This is due to a bug with nested plugins in Gatsby and hopefully will be resolved sometime in the future.
You should now be able to add an image to one of your Markdown files and see it in the browser, complete with fancy blurred placeholder. Let's do an assignment in the next video to help this stick.