How do you get GatsbyImage to work with gatsby-sanity-source?I have implemented this (
https://github.com/sanity-io/gatsby-source-sanity#using-images ) exactly as shown in the example, but cannot get it to work as shown.I have formatted my query exactly as shown (notice just the “asset”, without the “fluid, src, or gatsbyImage:
query vehicleQuery($slug: String) {
sanityVehicle(id: {eq: $slug}) {
id
_id
modellbetegnelse
manufacturer {
label
logoimage {
asset
}
} However, this gives me an error on build:
GraphQLError: Field "asset" of type "SanityImageAsset" must have a selection of subfields. Did you mean "asset { ... }"? If I add fluid, src, and even gatsbyImageData to the query:
query vehicleQuery($slug: String) {
sanityVehicle(id: {eq: $slug}) {
id
_id
modellbetegnelse
manufacturer {
label
logoimage {
asset {
fluid {
src
}
gatsbyImageData
}
}
} I get a different error:
WebpackError: TypeError: Cannot read property 'split' of undefined failed Building static HTML for pages - 0.243s
ERROR #95313
Building static HTML failed for path "/vehicles/-d9d34e74-0ffb-5ae8-b103-7895bfbd02c7"
See our docs page for more info on this error: <https://gatsby.dev/debug-html>
161 | var hasOriginalRatio = desiredAspectRatio === dimensions.aspectRatio;
162 | var outputHeight = Math.round(height ? height : width / desiredAspectRatio);
> 163 | var imgUrl = isOriginalSize(width, outputHeight) ||
| ^
164 | (hasOriginalRatio && width > dimensions.width && outputHeight > dimensions.height)
165 | ? url
166 | : url + "?w=" + width + "&h=" + outputHeight + "&fit=crop";
WebpackError: TypeError: Cannot read property 'split' of undefined
- getGatsbyImageProps.ts:163
gatsby-starter-hello-world/src/images/getGatsbyImageProps.ts:163:49
- getGatsbyImageProps.ts:393
gatsby-starter-hello-world/src/images/getGatsbyImageProps.ts:393:21
- vehicledetail.js:14
gatsby-starter-hello-world/src/templates/vehicledetail.js:14:36
- extends.js:8
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:8:1
- extends.js:14
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:14:1
- extends.js:13
[gatsby-starter-hello-world]/[@babel]/runtime/helpers/extends.js:13:1
- static-entry.js:263
gatsby-starter-hello-world/.cache/static-entry.js:263:20
- history.js:26
[gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/es/lib/history.js:26:1 A bit lost here… if I skip GatsbyImage altogether, and just use fluid src with <img src.., the site builds fine, including showing images.
System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.12.0 - /usr/local/bin/node
npm: 7.6.3 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.90
Firefox: 86.0
Safari: 14.0.3
npmPackages:
gatsby: ^3.0.1 => 3.1.2
gatsby-plugin-image: ^1.1.1 => 1.1.2
gatsby-plugin-postcss: ^4.1.0 => 4.1.0
gatsby-plugin-sharp: ^3.1.1 => 3.1.2
gatsby-source-filesystem: ^3.1.0 => 3.1.0
gatsby-source-sanity: ^7.0.0 => 7.0.0
gatsby-transformer-sharp: ^3.1.0 => 3.1.0
npmGlobalPackages:
gatsby-cli: 3.1.0 any ideas?