Gatsby JS: Remark splash image, ссылающийся на относительное или удаленное изображение

Question

У меня есть два файла уценки, один из которых ссылается на относительное изображение для его заставки, а другой - на внешнее изображение.

---
cover: relative.jpeg
---
Content Foo

а также

---
cover: https://external.com/external_image.jpg
---
Content Zap

Я хочу сослаться на оба изображения с помощью GraphQL вот так

query {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          cover {
            childImageSharp {
              fluid{
                # I'll be using a fragment here instead, but this is a minimal example
                src
              }
            }
          }
        }
      }
    }
  }
}

Есть ли способ получить gatsby-imageработать с внешними образами? В качестве альтернативы, есть ли плагин для Гэтсби, который сделает это?

Заранее спасибо!

Answer 1

Это выполнимо, но требует использования onCreateNode API для обработки преобразованных узлов уценки и загрузки удаленного образа с помощью файловой системы gatsby-source-filesystem. createRemoteFileNode() затем createSchemaCustomization API для применения необходимых модификаций схемы, таких как настраиваемые расширения или преобразователи, если вы хотите получить доступ как к удаленному, так и к локальному файлу, используя одно и то же поле graphql.

В качестве альтернативы я подозреваю, что https://www.gatsbyjs.org/packages/gatsby-plugin-remote-images/ делает именно то, что я описал выше, но у вас все равно будет два отдельных поля для удаленных / локальных данных.