Question

0

189

Views

rendering image with GatsbyImage

I'm unable to render a dynamic image coming from strapi cms using GatsbyImage from gatsby-plugin-image
Everything worked fine with the old gatsby-image plugin, really don't know what i'm doing wrong here.

Warning: Failed prop type: The prop srcis marked as required inJ, but its value is undefined.

How should i use the image object or the getImage() function to render the GatsbyImage ?

export const query = graphql`
  {
    allStrapiProjects(filter: { featured: { eq: true } }) {
      nodes {
        title
        image {
          localFile {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }

import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image";


const Project = ({
  image,
}: any) => {
  const gatsbyImg = getImage(image);
  const imgPath = image.localFile.childImageSharp.fluid;
  console.log("gatsbyImg:", gatsbyImg);
  console.log("image:", image);
  console.log("imgPath:", imgPath);

  return (
   ...
   <GatsbyImage image={imgPath} alt={"alt"} />
   )

Output result for the console logs above:

about 4 years ago · Santiago Gelvez

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-01T00:50:18.440Z

As you pointed out, the issue appears because of the mix of GraphQL nodes between gatsby-image and gatsby-plugin-image. Summarizing a lot, your queryable node should be gatsyImageData instead of fluid or fixed.

This is the previous syntax: import { graphql } from "gatsby"

export const query = graphql`
  {
    file(relativePath: { eq: "images/example.jpg" }) {
      childImageSharp {
        fixed {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

While the new one looks like:

import { graphql } from "gatsby"

export const query = graphql`
  {
    file(relativePath: { eq: "images/example.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }
`

Check further details in the migration guide

The problem is that you are querying the old GraphQL node (fluid or fixed) that worked for Img (from gatsby-image) while the new component, GatsbyImage requires an image prop, extracted from gatsbyImageData node.

That said, getImage is a helper function (not mandatory) that helps you to clean up the code.

Double-check the following steps:

Install the dependencies:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

Remove the old gatsby-image dependency references if any.
Clean the cache
Query the proper nodes: check them in localhost:8000/___graphiql
(Optional) run the codemod:
```
npx gatsby-codemods gatsby-plugin-image <optional-path>
```
This will automatically adapt your old code to the new syntax.

In the end, your code should look like:

export const query = graphql`
  {
    allStrapiProjects(filter: { featured: { eq: true } }) {
      nodes {
        title
        image {
          localFile {
            childImageSharp {
             gatsbyImageData(layout: FIXED)
            }
          }
        }
      }
    }

Your component should work alone since now is not working because it's not getting the proper data.

0

189

rendering image with GatsbyImage

1 answers

0

Find remote jobs

Andres GPT