Gatsby-plugin-image with programmatically created pages issue

Question

I'm creating pages programmatically in gatsby from MD files. the issues I'm having is I'm using the from gatsby-plugin-image to pull the image from the frontmatter of said MD file when the page loads the img is not rendered and i get and error gatsby-plugin-image] Missing image prop

this is the file and graphql set up

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout";
import {Button, Card, CardBody, CardTitle } from "reactstrap";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ({ data }) => {
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src={image}
            alt={post.description}
            placeholder="blurred"
            width={500}
            layout="constraint"
          />
          <CardTitle>{post.frontmatter.title}</CardTitle>
          <CardBody>
            <div dangerouslySetInnerHTML={{ __html: post.html }} />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
};

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        description
        image {
          childImageSharp {
            gatsbyImageData(
              width: 500
              placeholder: BLURRED
              formats: [AUTO]
            )
          }
        }
      }
    }
  }
`;

export default ProductPage;

I have tried a few different props such as changing

src={post.frontmatter.image} to src={image},

and changing

const image = getImage(post.image) to const image = getImage(post.frontmatter.image)

as you can see the title works fine so it has to be an issue with the image.

also when I use the same query in graphiql it does return the image.

and again .... `console.log(data);` (`post` or `image`) before return JSX? is it hard to start from checking data/props/args? — xadm, Mar 11 '21 at 20:08
so console.log(image) returns undefined but console.log(post) returns { html: '
hello there. this is it.
', frontmatter: { title: 'My tattoos dont like you either', description: "well it's true they don't", image: { childImageSharp: [Object] } } } — Brandon.b, Mar 11 '21 at 20:42
`const image = getImage(post.frontmatter.image); console.log(image);` ... plus read image plugin docs again ... about `` props/args ... error is exactly about that !!! — xadm, Mar 11 '21 at 21:21

score 1 · Answer 1 · answered Mar 12 '21 at 06:14

Your image belongs to the frontmatter, so according to your trials, you've never tried:

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout";
import {Button, Card, CardBody, CardTitle } from "reactstrap";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ({ data }) => {
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src={post.frontmatter.image.childImageSharp.gatsbyImageData}
            alt={post.description}
            placeholder="blurred"
            width={500}
            layout="constraint"
          />
          <CardTitle>{post.frontmatter.title}</CardTitle>
          <CardBody>
            <div dangerouslySetInnerHTML={{ __html: post.html }} />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
};

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        description
        image {
          childImageSharp {
            gatsbyImageData(
              width: 500
              placeholder: BLURRED
              formats: [AUTO]
            )
          }
        }
      }
    }
  }
`;

export default ProductPage;

Notice the nesting in post.frontmatter.image.childImageSharp.gatsbyImageData

Thank you very much I actually need to close this out I realized the issue with it was I was calling the image with "SRC" whichi is used for the with the i should have been using "image" to call it. — Brandon.b, Mar 12 '21 at 22:04

score 0 · Answer 2 · answered Mar 12 '21 at 22:06

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout";
import {Button, Card, CardBody, CardTitle } from "reactstrap";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ({ data }) => {
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src={post.frontmatter.image.childImageSharp.gatsbyImageData} <= should be using "IMAGE" not "SRC" SRC is used for <StaticImage> <GatsbyImage> should use "IMAGE" to call it.
            alt={post.description}
            placeholder="blurred"
            width={500}
            layout="constraint"
          />
          <CardTitle>{post.frontmatter.title}</CardTitle>
          <CardBody>
            <div dangerouslySetInnerHTML={{ __html: post.html }} />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
};

Gatsby-plugin-image with programmatically created pages issue

2 Answers2