[gatsby-image] Querying images from external source (Airtable)

[CharlyMartin]

Summary

I can't query images coming from Airtable using gatsby-image.

Description

I would add use gatsby-image to query images coming from Airtable (gatsby-source-airtable), but reading the documentation it seems like it's only possible to do so with local images.

Is this possible at all? Thanks for your help 😃

import React from "react"
import Img from "gatsby-image"
import { graphql } from "gatsby"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
    // I would like to put the image from airtable in the relativePath filter above.

      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Environment

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.38
    gatsby-cli: ^2.4.6 => 2.4.6
    gatsby-image: ^2.0.15 => 2.0.19
    gatsby-plugin-i18n: ^0.4.2 => 0.4.2
    gatsby-plugin-manifest: ^2.0.5 => 2.0.7
    gatsby-plugin-offline: ^2.0.5 => 2.0.11
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1
    gatsby-plugin-sharp: ^2.0.7 => 2.0.11
    gatsby-source-airtable: ^2.0.2 => 2.0.2
    gatsby-source-filesystem: ^2.0.4 => 2.0.7
    gatsby-transformer-sharp: ^2.1.4 => 2.1.7

File contents (if changed)

gatsby-config.js:

    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: readOnlyKey,
        tables: [
          {
            baseId: contentBaseId,
            tableName: 'home_page',
            tableView: viewAll,
            mapping: {'pictures': 'gatsby-transformer-sharp'}internal node system of Gatsby
          },
...

[jbolda]

In the gatsby-source-airtable repo, there are examples that may help clear things up for you. Feel free to open up an issue there with further questions / suggestions on how we may improve documentation to help prevent others from getting tripped up on this.

(Going to close this as it's not maintained in this repo. Again, happy to answer any questions in the repo.)

[CharlyMartin]

Thanks @jbolda for the answer.

I found a workaround, not using the gatsby-image plugin, to meet a deadline but I will have a look at the examples in the repo and open an issue if I find clarifications to add 🙂

[remidej]

@CharlyMartin could you share your solution?

[CharlyMartin]

Hi @remi2j,

I am just using gatsby-source-airtable to query the data on Airtable, using GraphQL.

The image is not processed by gatsby-image and sharp. It's "just" an API call where I get back the raw image's url, that I can then inject in the HTML.

The query looks like this:

            allAirtable(filter: {table: {eq: "home_page"}, data: {language: {eq: "${lang}"}}}) {
              edges {
                node {
                  data {
                    brand
                    caption
                    button
                    referrals
                    google
                    testimonials
                    pictures {
                      url
                    }
                    concept
                    alert
                    alert_message
                    language
                  }
                }

Here's my repo if you want to have a look: https://github.com/CharlyMartin/hubsy-v2.3

I hope it helps 🙂

[shendriksza]

Seeing as this issue comes up very easily searching for a solution on Google, I thought I would post an answer here.

You can use gatsby-plugin-remote-images to expose absolute image URL's to gatsby-image so they will be processed as if they are stored locally. Enjoy!

[jbolda]

To be clear, this is built into the gatsby-source-airtable plugin. If you are using that plugin, the documentation explains how to set this up that they are downloaded and fed into gatsby-image.