Гэтсби - сделать текучие изображения шириной ImageSharp из контрольного поля в csv-файле

Question

Я создаю страницы из 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»?

Answer 1

Файл csv должен содержать относительный путь к изображению в файловой системе, затем изображения распознаются и получают childImageSharp (если установлены gatsby-transformer-shap и gatsby-plugin-sharp).

Альтернативы вы можете использовать onCreateNode для управления узлом при сборке. Смотри: https://github.com/gatsbyjs/gatsby/issues/17783#issuecomment-533837059