Community Plugin

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

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
  ],
}

// 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)
          }
        }
      }
    }
  }
`