0
190
Visualizaçõesrendering 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:
1 Respostas
Responde à pergunta0
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-imagedependency references if any. - Clean the cache
- Query the proper nodes: check them in
localhost:8000/___graphiql - (Optional) run the codemod:
This will automatically adapt your old code to the new syntax.npx gatsby-codemods gatsby-plugin-image <optional-path>
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.