Gatsby Plugin Sharp / Gatsby Image Sharp - always sets backgroundColor to : "#080808" in gatsbyImageData

amaliwanag2 commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hello, using Gatsby Plugin Sharp and Gatasby Image Sharp, GatsbyImageData always has a backgroundColor of #080808 instead of the default transparent or any other color i specify in my graphql query.

Here is my relevant package.json

"gatsby": "^3.14.0",
"gatsby-plugin-image": "^2.3.0",
"gatsby-plugin-sharp": "^3.14.0",
"gatsby-transformer-sharp": "^3.14.0",

My config

module.exports = {
  siteMetadata: {
    domain: `${domain}`,
    siteUrl: `https://${domain}`, // Used in gatsby-plugin-sitemap
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-google-fonts-v2`,
      options: {
        fonts: [
          {
            family: 'Poppins',
            weights: ['300', '400', '500', '800', '900'],
          },
        ],
      },
    },
    // Handle server-side rendering MaterialUI styles:
    // https://github.com/hupe1980/gatsby-plugin-material-ui/tree/master
    {
      resolve: `gatsby-plugin-material-ui`,
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/themes/typography`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `./src/data/`,
      },
    },
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img`,
        path: `./src/img/`,
      },
    },
    `gatsby-transformer-json`,
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-image',
    {
      // If modifying, validate/update on webmaster tools for
      // Google, Bing, etc.
      // https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sitemap
      resolve: `gatsby-plugin-sitemap`,
      options: {
        // Exclude pages that just redirect.
        // Exclude our secret test page
        excludes: ['/help', '/contact', '/teamseas/atlantis'],
      },
    },
    {
      resolve: `gatsby-plugin-robots-txt`,
      options: {
        host: baseURL,
        sitemap: `${baseURL}/sitemap/sitemap-index.xml`,
        policy: [{ userAgent: '*', allow: '/' }],
      },
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: '1813501258922708',
      },
    },
    {
      resolve: 'gatsby-plugin-sentry',
      options: {
        dsn: 'https://8cb64ec80165437b98905b07296ddc3f@sentry.io/1232334',
      },
    },
    // Only include the S3 plugin in a CI environment, because
    // it requires the GATSBY_S3_BUCKET_NAME env var, and we
    // don't want to set a default value.
    ...(process.env.CI === 'true'
      ? [
          {
            resolve: `gatsby-plugin-s3`,
            options: {
              // https://github.com/jariz/gatsby-plugin-s3#configuration
              bucketName: process.env.GATSBY_S3_BUCKET_NAME,
              removeNonexistentObjects: false,
              acl: null,
            },
          },
        ]
      : []),
  ],
}

my graphql query in gatsby-node

const dynamicDataQuery = await graphql(`
      {
        allCausesJson(limit: 1000) {
          edges {
            node {
              data {
                metadata {
                  title
                  ogTitle
                  url
                  ogDescription
                  ogImage {
                    childImageSharp {
                      gatsbyImageData(quality: 8)
                    }
                  }
                  causeSpecificKeywords
                }
                sections {
                  Mission {
                    subtitle
                    text
                    title
                  }
                  TFACIntro {
                    img1 {
                      childImageSharp {
                        gatsbyImageData(backgroundColor: "transparent")
                      }
                    }
                    ...

and no matter how i specify my gatsbyImageData it always comes with a black background color.

I'm wondering if it's a version issue

Reproduction Link

https://github.com/gladly-team/tab-homepage

Steps to Reproduce

1. 2. 3. ...

Expected Result

The default background color should be transparent when I console.log gatsbyImageData in my react component

Actual Result

The background color is always a dark grey

Environment

System:
    OS: macOS 11.3.1
    CPU: (8) x64 Apple M1
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.18.1 - /var/folders/bh/5lfd52wd5nzdl68wtj0szg040000gn/T/yarn--1638831358687-0.7000238283686109/node
    Yarn: 1.22.15 - /var/folders/bh/5lfd52wd5nzdl68wtj0szg040000gn/T/yarn--1638831358687-0.7000238283686109/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.14.0 => 3.14.5 
    gatsby-plugin-facebook-pixel: ^1.0.5 => 1.0.8 
    gatsby-plugin-google-fonts-v2: ^1.0.0 => 1.0.0 
    gatsby-plugin-image: ^2.3.0 => 2.3.0 
    gatsby-plugin-material-ui: ^3.0.1 => 3.0.1 
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0 
    gatsby-plugin-robots-txt: ^1.6.10 => 1.6.14 
    gatsby-plugin-s3: ^0.3.8 => 0.3.8 
    gatsby-plugin-sentry: ^1.0.1 => 1.0.1 
    gatsby-plugin-sharp: ^3.14.0 => 3.14.3 
    gatsby-plugin-sitemap: ^4.10.0 => 4.10.0 
    gatsby-plugin-typography: ^3.14.0 => 3.14.0 
    gatsby-source-filesystem: ^3.14.0 => 3.14.0 
    gatsby-transformer-json: ^3.14.0 => 3.14.0 
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0 
    gatsby-transformer-yaml: ^3.14.0 => 3.14.0

Config Flags

No response

LekoArts commented 2 years ago

Hi, thanks for the issue!

To make the process of resolving problems quicker for both sides we need you to fill out the issue template and give us a minimal reproduction. The project you linked is too big and not a minimal reproduction. You'll also need to use the latest version of Gatsby packages, so Gatsby v4 etc.

graysonhicks commented 2 years ago

I don't know where allCauses is coming from, but this is likely from a source plugin or transformer not passing global sharp options in. Similar to known contentful issue: https://github.com/gatsbyjs/gatsby/pull/33536

github-actions[bot] commented 2 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

LekoArts commented 2 years ago

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

gatsbyjs / gatsby