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.
npm install --save-dev gatsby-source-gcs-imageor
yarn add -D gatsby-source-gcs-imageAt 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
],
}| 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) |
export const pageQuery = graphql`
{
allGcsImage {
edges {
node {
name
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, width: 800)
}
}
}
}
}
`