gatsby-source-gcs-image

What Is This?

gatsby-source-gcs-image is a GatsbyJS source plugin that converts images from Google Cloud Storage into GatsbyJS File nodes--much like how this plugin works with AWS S3. See here for more.

The created GatsbyJS File nodes can then be manipulated with image processors like sharp.

Usage

Install

npm install --save-dev gatsby-source-gcs-image

or

yarn add -D gatsby-source-gcs-image

Configure

At a minimum GCP creds must be provided with either credsJson or pathToCreds. Some example configurations are:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-gcs-image',
      options: {
        bucketName: 'my-gcs-bucket.appspot.com',
        bucketPath: '/path/to/images',
        expires: 120,
        pathToCreds: `${__dirname}/.gcp-creds.json`,
        projectId: 'my-gcp-project',
      },
    },
    // ...image transform plugins
  ],
}

or

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-gcs-image',
      options: {
        credsJson: process.env.ENV_VAR_WITH_CREDS,
      },
    },
    // ...image transform plugins
  ],
}

Fields

name	type	default	required	description
bucketName	string		*	GCS bucket (may exist in creds)
credsJson	string		*	JSON string with creds (optional if pathToCreds is provided)
expires	number	900		signed url expiration in seconds
pathToCreds	string		*	JSON file with creds (optional if credsJson is provided)
projectId	string		*	GCP project id (may exist in creds)

Query Data

export const pageQuery = graphql`
  {
    allGcsImage {
      edges {
        node {
          name
          childImageSharp {
            gatsbyImageData(layout: CONSTRAINED, width: 800)
          }
        }
      }
    }
  }
`