如何使用gatsby插件图像插件通过GraphQL查询图像

Question

嗨，我正在使用Prism作为无头CMS，并希望在gatsby插件图像插件中查询图像。不幸的是，我没有收到错误消息或其他任何东西，只是不起作用。

class Index extends Component {
render() {
const {
data: { homepage },
} = this.props
const image = getImage(homepage.data.gesichter.localFile)
return (
<Layout>
<IndexWrapper id={website.skipNavId} style={{ paddingTop: '2rem', paddingBottom: '2rem' }}>
<Hero>
<HeroInner>
<H1>{homepage.data.title.text}</H1>
<GatsbyImage image={image} alt={homepage.data.gesichter.alt} />
</HeroInner>
</Hero>
</IndexWrapper>
</Layout>
)
}
}
export default Index
Index.propTypes = {
data: PropTypes.shape({
homepage: PropTypes.shape({
data: PropTypes.shape({
title: PropTypes.shape({
text: PropTypes.string.isRequired,
}),
content: PropTypes.shape({
html: PropTypes.string.isRequired,
}),
gesichter: PropTypes.shape({
alt: PropTypes.string.isRequired,
localFile: PropTypes.shape({
childImageSharp: PropTypes.shape({
gatsbyImageData: PropTypes.element.isRequired,
}),
}),
}),
}),
}),
}).isRequired,
}
export const pageQuery = graphql`
query IndexQuery {
homepage: prismicHomepage {
data {
title {
text
}
content {
html
}
gesichter {
alt
localFile {
childImageSharp {
gatsbyImageData(
width: 200
placeholder: BLURRED

layout: FULL_WIDTH
)
}
}
}
}
}
}
`

我认为道具类型gatsbyImageData: PropTypes.element.isRequired,有问题，但我没有进一步了解。

有人知道该怎么办吗？

Answer 1

您的localFile字段可能是null。根据您的PropTypes，不需要localFile字段，这可能是您没有看到警告或错误的原因。

您能确认gatsby-source-prismic已配置为在本地下载文件吗？

您可以通过将其包含在站点的gatsby-config.js文件中来完成此操作：

// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-source-prismic',
options: {
// Along with your other options...
// Set a function to determine if images are downloaded locally and made
// available for gatsby-transformer-sharp for use with gatsby-image.
// The document node, field key (i.e. API ID), and field value are
// provided to the function, as seen below. This allows you to use
// different logic for each field if necessary.
// This defaults to always return false.
shouldDownloadImage: ({ node, key, value }) => {
// Return true to download the image or false to skip.
return true
},
},
},
]

在大多数情况下，这个选项看起来是这样的：

plugins: [
{
resolve: 'gatsby-source-prismic',
options: {
// Along with your other options...
shouldDownloadImage: () => true,
},
},
]

使用gatsby develop重新启动Gatsby开发服务器后，您应该会在localFile字段中看到您的图像正在下载并可用。