所以我正在使用gatsby-source-airtable来从我的airtable中提取图像。
在我的gastby-config中,我已将附件列映射为filenode:
mapping: {'image':fileNode}
,
在GraphiQL中,盖茨比图像插件似乎可以正常工作 此查询:
{
airtable(table: {
eq: "table-1"
}, data: {
slug: {
eq: "test-1"
}
}) {
data {
image {
localFiles {
childImageSharp {
fluid(maxWidth: 400) {
src
}
}
}
}
}
}
}
提供此响应:
{
"data": {
"airtable": {
"data": {
"image": {
"localFiles": [{
"childImageSharp": {
"fluid": {
"src": "/static/08baa0d1735184a4d0dd141d90f564d4-28158c2eb0b0b748efeabc0ec551c623-7eb65.jpg"
}
}
}]
}
}
}
}
}
然后转到该src生成图像并显示在浏览器中。
但是,当我尝试将其与gatsby-image配合使用时:
<Img fluid={post.data.image.localFiles.childImageSharp.fluid} />
export const query = graphql query PostQuery {
airtable(table: {
eq: "table-1"
}, data: {
slug: {
eq: "test-1"
}
}) {
data {
image {
localFiles {
childImageSharp {
fluid(maxWidth: 400) { ...GatsbyImageSharpFluid
}
}
}
}
}
}
}
我收到此错误:
WebpackError:TypeError:无法读取未定义的属性“ fluid”
我在做什么错了?任何助手都会感激
答案 0 :(得分:0)
您没有将数据传递到您的gatsby图像组件之一,因此会引发错误。尝试在运行gatsby develop
的同时单击页面,以查看发生这种情况的位置。此外,任何错误报告或日志都将有所帮助。
答案 1 :(得分:0)
查询localFiles
上的image
字段将为您提供一个数组。在GraphiQL中测试查询:
请注意,您必须将
...GatsbyImageSharpFluid
片段(不受GraphiQL支持)替换为另一个字段,例如src
airtable(table: {
eq: "table-1"
}, data: {
slug: {
eq: "test-1"
}
}) {
data {
image {
localFiles {
childImageSharp {
fluid(maxWidth: 400) {
src
}
}
}
}
}
}
您应该得到类似的东西:
{
"data": {
"airtable": {
"data": {
"image": {
"localFiles": [
{
"childImageSharp": {
"fluid": {
"src": "/static/8a6a13a2664ef8330843b7855ad2c5e2/d278e/o.jpg"
}
}
}
]
}
}
}
}
}
如您所见,localFiles
是一个数组,因此在组件中应编写:
<Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />