Абсолютные пути к изображениям в Gatsby JSON - PullRequest
Новая
       43

Абсолютные пути к изображениям в Gatsby JSON

0 голосов
/ 12 февраля 2019

Я использую gatsby-transformer-json для запроса файлов JSON в Гэтсби.В файле JSON есть URL-адреса изображений, однако они являются абсолютными путями к файлам, и Гэтсби преобразует только относительные пути в узлы изображений.

Мой JSON: 

{
  "defaultImage": "images/defaultImage.jpg"
}

Мой запрос: 

metadataJson {
  defaultImage {
    childImagageSharp {
      fixed(width: 3200, height: 2133) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

Однако это не удается с ошибкой, поскольку Гэтсби встречает абсолютный путь и, поскольку он не является относительным, он не преобразует его в узел изображения Sharp.

Если это был файл MarkdownЯ мог бы сам преобразовать путь и сохранить его в объекте fields узла Markdown.Однако эта опция недоступна для меня с gatsby-transformer-json.

Как преобразовать абсолютный путь в файле JSON, чтобы Гэтсби заменил путь узлом изображения Sharp?

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете использовать createNodeField на любом типе узлов, а не просто замечание по уценке.

Если вы установите gatsby-config.js, как показано ниже: 

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/meta`, <-- folder name is used to create node type name, i.e `MetaJson`
    name: `meta`, <-- doesn't affect json node's type name
  },
},
`gatsby-transformer-json`,

Затем вы можете преобразоватьих в gatsby-node.js точно так же, как вы делаете это с узлом MarkdownRemark. 

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MetaJson`) {
    const relativePath = ...

    createNodeField({
      node,
      name: `foo`,
      value: relativePath,
    })
  }
}

Вы также можете передать дополнительные опции в gatsby-transformer-json, чтобы иметь более точный контроль зернаВнутреннее имя типа узлов json.

И точно так же, как с уценкой, преобразованной gatsby-transformer-remark, jsons, преобразованный gatsby-transformer-json, также присоединяет дочерний узел к своему родительскому узлу File: 

{
  file( sourceInstanceName: { eq: "meta" } ) {
    dir
    childMetaJson {
      fields {
        foo
      }
    }
  }
}
...