Passing Gatsby Image As Prop

Question

I'm trying to learn Gatsby by building a demo blog. I have an Archive component, where I'm querying blog data, and I'm trying to pass the Image down as a prop, however, when im trying to access the prop within my Article component, I keep getting a TypeError: Cannot read property 'childImageSharp' of null.

Here is my code:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

// components
import Article from "./article"

const BLOG_QUERY = graphql`
  {
    allMarkdownRemark {
      nodes {
        excerpt
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          author
          slug
          image {
            childImageSharp {
              fluid(maxWidth: 600) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
        timeToRead
      }
    }
  }
`
const Archive = () => {
  const data = useStaticQuery(BLOG_QUERY)
  console.log(data)
  return (
    <div>
      {data.allMarkdownRemark.nodes.map(node => (
        <Article
          key={node.frontmatter.slug}
          title={node.frontmatter.title}
          excerpt={node.excerpt}
          image={node.frontmatter.image.childImageSharp.fluid}
        />
      ))}
    </div>
  )
}

export default Archive

Markdown header as below:

---
slug: "/what-is-gatsby"
title: "What Is Gatsby?"
image: "../images/gatsby.png"
author: "Joshua Isaac"
date: "2019-10-23"
---

Data logged:

Article Components:

import { React } from 'react'
import Img from 'gatsby-image'

const Article = (props) => {
 return(
  <div>
    <h3>{props.frontmatter.title}</h3>
    <Img fluid={props.image} />
  </div>

 )
}

The code is fine, please elaborate the image location, and make a producible example [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Dennis Vash, Oct 24 '19 at 05:14
images are in "/src/images" folder. i defined image paths within markdown file — juicy j, Oct 24 '19 at 05:21
so show us, show us the markdown, please read the link I shared — Dennis Vash, Oct 24 '19 at 05:37
Please show your logged data, did you check your query in GraphiQL? — Dennis Vash, Oct 24 '19 at 06:29
How many markdown files are there? Do all of them have a `frontmatter.image`? — ksav, Oct 24 '19 at 07:20
Please don't post images, post the code, also you showed only the first node, there are 4. — Dennis Vash, Oct 24 '19 at 12:11
Try showing the `Article` component, maybe you don't access it as expected — Dennis Vash, Oct 24 '19 at 12:12
Ive included my Article component and how im attemping to access the prop in my question, thanks — juicy j, Oct 24 '19 at 13:00

ksav · Answer 1 · 2019-10-24T13:32:53.237

0

Ensure that each of your markdown files has an image property in the frontmatter that contains a relative path to an image.

Also, in <Article/> it looks like you are trying to access a non-existant property: props.frontmatter.title.

You only pass key, title, excerpt & image props to <Article/>, and so the prop frontmatter simply does not exist.

// article.js

import { React } from 'react'
import Img from 'gatsby-image'

const Article = (props) => {
 return(
  <div>
    <h3>{props.title}</h3>
    <Img fluid={props.image} />
  </div>
 )
}

edited Oct 24 '19 at 13:32

answered Oct 24 '19 at 13:18

ksav

20,015
6
46
66

The title is also part of the frontmatter, how am i able to access the title but not image if they are both within frontmatter? – juicy j Oct 24 '19 at 13:23
sorry @ksav, im a bit consufed, could you elaborate? thanks in advance! – juicy j Oct 24 '19 at 13:28

score 0 · Answer 2 · answered Apr 11 '21 at 10:03

Maybe it will be useful to someone:

Install npm install --save gatsby-source-filesystem
Add to your gatsby-config.js:

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static`,
        path: `${__dirname}/static/blog/`,
      },
    },

Create a folder static next to src
Change the path to your image in the markdown file
And than:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

// components
import Article from "./article"

const BLOG_QUERY = graphql`
  {
    allMarkdownRemark {
      nodes {
        excerpt
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          author
          slug
          image {
            childImageSharp {
               gatsbyImageData(
                 formats: [AUTO, WEBP, AVIF]
               )
            }
          }
        }
        timeToRead
      }
    }
  }
`
const Archive = () => {
  const data = useStaticQuery(BLOG_QUERY)
  console.log(data)
  return (
    <div>
      {data.allMarkdownRemark.nodes.map(node => (
        <Article
          key={node.frontmatter.slug}
          title={node.frontmatter.title}
          excerpt={node.excerpt}
          image={node.frontmatter.image}
        />
      ))}
    </div>
  )
}

export default Archive

import { React } from 'react'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Article = (props) => {

const image = getImage(props.image)

 return(
  <div>
    <h3>{props.title}</h3>
    <GatsbyImage image={image} alt={props.title} />
  </div>

 )
}

If it doesn't work: gatsby clean

Passing Gatsby Image As Prop

2 Answers2