Images in markdown not loading in template in gatsbyjs - reactjs

Question

Just like this tutorial Working with Images in Markdown Posts and Pages; I am trying to load a blog post's image from my markdown(frontmatter) to my template header
featuredImage: "../images/hiplife.jpg"
My template component looks like this:
import React from "react"
import { graphql } from "gatsby"
import { Img } from "gatsby-image"
import Layout from "../../components/layout/layout"
import Navbar from "../../components/navbar/navbar"
import styles from "./blogposts.module.css"
import kasahare from "../../images/pwd.png"
export default ({ data }) => {
let post = data.markdownRemark
let featuredImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid
return (
<Layout>
<Navbar />
<div className={styles.Header}>
<Img fluid={featuredImgFluid} />
</div>
<div className={styles.BlogPosts}>
<div className={styles.BlogPostsHolder}>
<div className={styles.authorside}>
<div className={styles.author}>
<div>
<img className={styles.authorImg} src={kasahare} alt="Logo" />
</div>
<div>{post.author}</div>
<div>{post.date}</div>
<div className={styles.tag}>{post.tag}</div>
</div>
</div>
<div
className={styles.blogpostcontent}
dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
/>
</div>
</div>
</Layout>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
author
title
tag
featuredImage {
childImageSharp {
fluid(maxWidth: 1050) {
base64
aspectRatio
src
srcSet
sizes
}
}
}
}
}
}
`
But I keep getting this error.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
My gatsby-config looks like
module.exports = {
/* Your site config here */
siteMetadata: {
title: "HipLife",
description: "The blog for hiplife culture",
author: "kaf",
},
plugins: [
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `markdown`,
path: `${__dirname}/src/markdown`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
}
And my gatsby-node
const path = require(`path`)
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogposts/blogposts.js`)
const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`)
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {}, // additional data can be passed via context
})
})
}

Answer 1

Found out I had curly braces around my gatsby-image import import { Img } from "gatsby-image"
Removing them got it working. Thanks