Gatsby JS: Remark splash image referencing either a relative or remote image

Question

I have two markdown files, one that references a relative image for its splash image and another that references an external image.

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

and

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

I want to reference both images with GraphQL like so

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

Is there a way to have gatsby-image work with external images? Alternatively, is there a gatsby plugin that will accomplish this?

Thanks in advance!

Answer 1

This is doable but requires using the onCreateNode API to process transformed markdown nodes and download the remote image using gatsby-source-filesystem's createRemoteFileNode() then the createSchemaCustomization API to apply the necessary schema modifications like custom extensions or resolvers if you want to access both remote/local file using the same graphql field.

Alternatively I suspect https://www.gatsbyjs.org/packages/gatsby-plugin-remote-images/ does exactly what I describe above but you will still have two separate fields for remote/local data.