getSrc helper from gatsby-plugin-image return return undefined with resize option from sharp

[lezan]

Hello!

I am wondering if I am doing something wrong with getSrc and resize, because the first (getSrc) always return undefined if I use an object return by the second (resize).

I am query my image with

banner: file(relativePath: { eq: "home/home-seo.jpg" }) {
    childImageSharp {
        resize(width: 1920) {
           src
           height
           width
	}
    }
}

then if I print it with console.log(banner) I am able to see it

{
  "childImageSharp": {
    "resize": {
      "src": "/static/38893463114f979e4ea385c4ff41bc04/097fa/home-seo.jpg",
      "height": 1080,
      "width": 1920
    }
  }
}

but if I do console.log(getSrc(banner)), then it returns undefined.

Am I doing something wrong? Is getSrc not able to work with resize?

Thanks!

[LekoArts]

The helper functions only work if you use the gatsbyImageData object: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#helper-functions

You can see the source code here:

gatsby/packages/gatsby-plugin-image/src/components/hooks.ts

Lines 65 to 76 in f37e5f9

	export const getImage = (node: ImageDataLike): IGatsbyImageData | undefined => {
	if (isGatsbyImageData(node)) {
	return node
	}
	if (isGatsbyImageDataParent(node)) {
	return node.gatsbyImageData
	}
	return node?.childImageSharp?.gatsbyImageData
	}
	export const getSrc = (node: ImageDataLike): string | undefined =>
	getImage(node)?.images?.fallback?.src

[lezan]

Hello @LekoArts, and thanks for you answer and all the work you do!
Totally make sense, I make some confusion between gatsbyImageData and childImageSharp.