Our images are loading, but we need to make one small change to our Events page. The Events page is showing some weird extra things in our index of events. We can fix this easily by modifying the query in events.mdx. We just need to add a filter to only list items in our /content/events folder. The fixed query looks like this:
// src/pages/events.mdx
export const pageQuery = graphql`
query {
allMdx(
limit: 5
sort: { fields: frontmatter___date, order: DESC }
filter: { fileAbsolutePath: { regex: "//content/events//" } }
) {
nodes {
excerpt
fields {
slug
}
frontmatter {
category
date(formatString: "MM/DD/YYYY")
title
}
id
}
}
}
`
Okay, let's learn the first way to use images in Markdown: using frontmatter.