gatsby-source-gcs-image v1.1.1

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

Query Data

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