Question

我从csv文件创建页面。该文件包含一个字段“ image”，其图像名称位于/src/images/products/和一个“ category”字段中。

我想创建一个类别页面，其中包含该类别的所有图像。在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”中有了图像，但是如何通过“图像”字段引用路径？

Answer 1

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

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

Gatsby-在csv文件中的参考字段中使流体图像的宽度变为ImageSharp

1 个答案: