Gatsby - 从 csv 文件中的参考字段制作流体图像宽度 ImageSharp

Posted 2023-03-08

【中文标题】Gatsby - 从 csv 文件中的参考字段制作流体图像宽度 ImageSharp

【英文标题】：Gatsby - make fluid Images width ImageSharp from reference field in csv-file

【发布时间】：2020-02-05 14:42:01

【问题描述】：

我从 csv 文件创建页面。该文件包含一个“图像”字段，其中包含/src/images/products/ 中图像的文件名和一个“类别”字段。

我想创建一个包含该类别的所有图像的类别页面。在 gatsby-node.js 中获取不同的类别以为每个类别创建一个页面：

// Create Categrorie pages from CSV
    const resultCategories = await graphql (`
        query 
            allCsvFile 
                distinct(field: category)
            
        
    `)
    resultCategories.data.allCsvFile.distinct.forEach( category => 
        createPage(
            // Path for this page — required    
            path: category.toLowerCase(),
            component: path.resolve(`./src/templates/catalog-categoriepage.js`),
            context: 
                Category: category
            
        )
    )

在 /src/templates/catalog-categoriepage.js 中，我在 graphql 中查询其他字段以生成项目列表：

export const query = graphql`
  query($Category: String!) 
    product: allCsvFile(filter: category: eq: $Category) 
      nodes 
        field1
        field2
        image
      
    
  
`

如何使用“图像”中的文件名为该页面创建流畅的图像？ 我已经在“allFile”中有图片，但是如何通过“image”字段引用路径？

【参考方案1】：

csv-File 必须包含文件系统中图像的相对路径，然后识别图像并获取 childImageSharp（如果安装了 gatsby-transformer-shap 和 gatsby-plugin-sharp）。

您可以使用 onCreateNode 在构建时操作节点。看： https://github.com/gatsbyjs/gatsby/issues/17783#issuecomment-533837059

【讨论】：

如何获取同一行引用的多个图像？