gatsby-plugin-image not generating avif images correctly

[rodneylab]

Description

AVIF format image links are output in generated HTML but the images are blank and do not load (WebP works fine). Compare https://gatsbyfunctionsfaunamain.gatsbyjs.io/static/73926a363db71e14b16a6a9172cd7bc3/cb0d8/twin-lens-reflex-camera.avif and the equivalent webp: https://gatsbyfunctionsfaunamain.gatsbyjs.io/static/73926a363db71e14b16a6a9172cd7bc3/e4043/twin-lens-reflex-camera.webp, generated by the plugin. These links are taken from the markup on this page: https://gatsbyfunctionsfaunamain.gatsbyjs.io/twin-lens-reflex-camera/

Steps to reproduce

1. Clone repo https://github.com/rodneylab/gatsby-functions-fauna.git
2. Copy .env.EXAMPLE to .env.development or .env.production
3. Run gatsby develop
4. Open the /best-medium-format-camera-for-starting-out/ route in browser (use Chrome as Firefox is loading the WebP file instead of AVIF for me).

extra information

gatsby-config.js options:

module.exports = {
  flags: {
    FUNCTIONS: true,
  },
...
    'gatsby-plugin-image',
    {
      resolve: 'gatsby-plugin-sharp',
      options: {
        defaults: {
          placeholder: 'tracedSVG',
          formats: ['auto', 'webp', 'avif'],
          quality: 100,
          avifOptions: { lossless: true, quality: 100, speed: 0 },
          jpgOptions: { quality: 100, progressive: true },
          pngOptions: { quality: 100, compressionSpeed: 1 },
          webpOptions: { quality: 100 },
          tracedSVGOptions: {
            color: '#5cc8ff',
            background: '#fff275',
          },
        },
        defaultQuality: 100,
        stripMetadata: false,
        useMozJpeg: true,
      },
    },
    'gatsby-transformer-sharp',

GatsbyImage used in src/components/BannerImage.jsx with graphql query

export const BlogPostBannerImage = ({ imageData, alt, width, height }) => (
  <GatsbyImage
    className={image}
    image={getImage(imageData)}
    alt={alt}
    width={width}
    height={height}
    imgStyle={{ borderRadius: '0.75rem' }}
  />
);

...

export const query = graphql`
  fragment BannerImageFragment on File {
    childImageSharp {
      gatsbyImageData(
        width: 672
        layout: CONSTRAINED
        sizes: "(max-width: 672px) calc(100vw - 32px), 672px"
      )
    }
  }
`;

Complete repo is at https://github.com/rodneylab/gatsby-functions-fauna live site is at https://gatsbyfunctionsfaunamain.gatsbyjs.io/best-medium-format-camera-for-starting-out/

Expected result

Page should load and SVG placeholder should be replaced by the AVIF image.

Actual result

SVG placeholder image is not replaced.

Environment

  Binaries:
    Node: 14.17.0 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 6.14.13 - /usr/local/opt/node@14/bin/npm
  npmPackages:
    gatsby: ^3.5.0 => 3.5.0 
    gatsby-node-helpers: ^1.2.1 => 1.2.1 
    gatsby-plugin-csp: ^1.1.3 => 1.1.3 
    gatsby-plugin-gatsby-cloud: ^2.5.0 => 2.5.0 
    gatsby-plugin-image: ^1.5.0 => 1.5.0 
    gatsby-plugin-mdx: ^2.5.0 => 2.5.0 
    gatsby-plugin-react-helmet: ^4.5.0 => 4.5.0 
    gatsby-plugin-sass: ^4.5.0 => 4.5.0 
    gatsby-plugin-sharp: ^3.5.0 => 3.5.0 
    gatsby-remark-images: ^5.2.0 => 5.2.0 
    gatsby-source-filesystem: ^3.5.0 => 3.5.0 
    gatsby-transformer-sharp: ^3.5.0 => 3.5.0 
  npmGlobalPackages:
    gatsby-cli: 3.5.0

Let me know if you need more details. Happy to help,

Rodney

[github-actions[bot]]

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! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. 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 again for being part of the Gatsby community! 💪💜

[niksumeiko]

@rodneylab, I see it's resolved on your live site (https://gatsbyfunctionsfaunamain.gatsbyjs.io/best-medium-format-camera-for-starting-out/). May I ask what the solution to this issue was?

[tzuntar]

This seems to still be an issue. It was happening to me the last three days or so, for now I fixed it by just going with WEBP instead. I haven't customized my config files or anything.