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