Gatsby, "gatsby--image" not showing image when project is "build" but showing properly while in development

Question

I building my first static website with gatsby. But have trouble working with "gatsby-image". I am using "Img" component from "gatsby-image" and it's showing the image properly in development but showing nothing when I build the site.

Header where I am using the Image:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Header = () => {
    const data = useStaticQuery(graphql`
        query {
            placeholderImage: file(relativePath: { eq: "logo.png" }) {
                childImageSharp {
                    fluid (maxWidth: 225) {
                        ...GatsbyImageSharpFluid_noBase64
                    }
                }
            }
        }
    `);

    return (
        <header>
            <nav>
                <div className="nav-brand">
                    <Img 
                        imgStyle={{ objectFit: 'contain' }}
                        fluid={data.placeholderImage.childImageSharp.fluid}
                        alt="Just Do It" 
                    />
                </div>
        </header>
    );
}

export default Header;

• Plugins setup in gatsby-config:

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`
  ],

• My Image is 225 * 33 PNG image.

Answer 1

I realise this is an old post but I had a similar issue which bugged me for hours until I finally realised it was because the filetype was being banned by AWS on Amplify. If your host is preventing them being displayed you can enable the image types in the instance settings.