带有 gatsby 图像的 Airtable gatsby 源插件

Posted 2023-02-19

【中文标题】带有 gatsby 图像的 Airtable gatsby 源插件

【英文标题】：Airtable gatsby source plugin with gatsby image

【发布时间】：2019-03-11 04:41:52

【问题描述】：

所以我正在使用 gatsby-source-airtable 从我的 airtable 中提取图像。

在我的 gastby-config 中，我将附件列映射为文件节点：

mapping: 'image':fileNode,

在 GraphiQL gatsby 图像插件似乎正在工作 这个查询：

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: Cannot read property 'fluid' of undefined

我做错了什么？任何助手将不胜感激

【问题讨论】：

快速问题是这个 Gatsby 版本 1 或 2。另外，你读过这个 [教程](blog.airtable.com/…) 它使用 Airtable 中的图像作为表格中附件字段的一部分。跨度>

您的链 (post.data.image.localFiles.childImageSharp.fluid) 集合中是否有任何属性？例如localFiles 是某种数组吗？

【参考方案1】：

查询image 上的localFiles 字段将为您提供一个数组。在 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 />

【参考方案2】：

您没有将数据传递给您的 gatsby 图像组件之一，因此它会引发错误。尝试在运行gatsby develop 的同时单击您的页面以查看发生这种情况的位置。此外，任何错误报告或日志都会有所帮助。