Trouble displaying images in Gatsby/Sanity project using GraphQL query
5 replies
Last updated: Mar 8, 2021
C
I have a pageLinks section in a Gatsby/Sanity project I’m building. I’m using this in part of an array of page builder elements. I’m having problems getting the images in this to display using Gatsby Image. Here’s the GraphQL query I’m currently using:
The problem is that both fluid and fixed don’t exist when I try to use them in Gatsby. I’ve used GatsbySanityImageFluid in another part of the site and that works fine so I’m puzzled why it doesn’t work here. Any suggestions as to what I’m doing wrong?
... on SanityPageLinks {
_key
_type
pageLinks {
linkTitle
linkText {
_rawChildren(resolveReferences: { maxDepth: 10 })
}
photo {
alt
_type
asset {
fluid(maxWidth: 560) {
...GatsbySanityImageFluid
}
fixed(width: 250, height: 125) {
...GatsbySanityImageFixed
}
}
hotspot {
_key
_type
height
width
x
y
}
asset {
_id
}
caption
crop {
_key
_type
bottom
left
right
top
}
}
_type
url {
_type
category {
title
slug {
current
}
}
slug {
current
}
_rawBody(resolveReferences: { maxDepth: 10 })
}
}
}The problem is that both fluid and fixed don’t exist when I try to use them in Gatsby. I’ve used GatsbySanityImageFluid in another part of the site and that works fine so I’m puzzled why it doesn’t work here. Any suggestions as to what I’m doing wrong?
Mar 8, 2021, 8:57 PM
C
Gatsby Image doesn’t add the fragments in portable text. You could try gatsby-plugin-sanity-image instead. Easier to use, less markup to fuss with, and you don’t have to specify display resolution in your GraphQL queries (and you can vary them dynamically if you want/need to).
Mar 8, 2021, 9:04 PM
C
Thanks Corey. The image isn’t inside portable text as far as I’m aware. It’s a separate field as part of an array made of up the pageLink title, url and photo. Also I tried gatsby-plugin-sanity-image and as below but got the error message also shown below. Any suggestions?
pageLinks {
linkTitle
linkText {
_rawChildren(resolveReferences: { maxDepth: 10 })
}
photo {
alt
...ImageWithPreview
}
_type
url {
_type
category {
title
slug {
current
}
}
slug {
current
}
_rawBody(resolveReferences: { maxDepth: 10 })
}
}There was an error in your GraphQL query: Fragment "ImageWithPreview" cannot be spread here as objects of type "SanityFigure" can never be of type "SanityImage". GraphQL request:69:15 68 | alt 69 | ...ImageWithPreview | ^ 70 | }
Mar 8, 2021, 9:38 PM
C
Oh gotcha. You just need to tell Gatsby that
SanityFigureis an image type. gatsby-plugin-sanity-image can do that for you using the
customImageTypesoption in your gatsby-config. You can check the README for the full details, but basically you just want to add this in the plugin options:
customImageTypes: ["SanityFigure"],
Mar 8, 2021, 9:40 PM
C
C
great, thanks, I’ll take a look
Mar 8, 2021, 9:42 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.