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.

Duad

What do you mean by ‘when I build the image’, exactly? Also, it would help if you provided an interactive example (e.g. CodeSandbox). – Buxtehude

@PowellYe I am sorry, I meant not showing the image after building the project using "gatsby build". What is happening is I am getting the image in development mode but when I build my project. I am getting a blank in the place of the image. – Duad

No need to apologize : ) Thanks for clarifying! Could you please create a sample CodeSandbox containing all related code and files? – Buxtehude

@PowellYe codesandbox.io/embed/github/thisis-Shitanshu/… here's the link to my CodeSandbox. – Duad

And here's my production build thisis-shitanshu.github.io/gatsby-just_do_it-nike. – Duad

Much appreciated. I've downloaded project files to my laptop, tried both prod and develop builds - the image is there in both cases. Have you already tried cleaning things up (you can leverage gatsby clean command for that) and creating a fresh bundle, and probably reinstalling packages also? – Buxtehude

@PowellYe I still not able to get the image to work in the production build. I have tried both using gatsby clean and create a fresh bundle, and also reinstalling the packages with both first yarn and tired using npm. And still couldn't get the image. Plus if you check the console on the link thisis-shitanshu.github.io/gatsby-just_do_it-nike, you will find 404 error. – Duad

I honestly don't know what's wrong. I suggest to open an issue in their repo - github.com/gatsbyjs/gatsby/issues – Buxtehude

I have the same problem. @Duad how did you go about this issue? Do you remember any solutions? – Goatfish

Apparently this is an on-going problem... github.com/gatsbyjs/gatsby/issues/20126 github.com/gatsbyjs/gatsby/issues/8323 – Radiation

Answer 1

I had a similar issue after upgrading to Gatsby v5. The placeholder (blurred) never swapped out for the correct image.

Rechecked the latest installation steps, and I was missing gatsby-plugin-image in my config (check it appears in order).

    `gatsby-plugin-image`,
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',

Updated, and immediately fixed the issue.

Hemorrhoidectomy

For others, same here. Had plugins in different order, sorting like this fixed the issue. – Meningitis

Woah, got the same issue. In my config the gatsby-plugin-image was missing... it was working on dev but not really on build. Thanks a lot! – Tristichous

Answer 2

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.

Clearance

Answer 3

I think I ran into this before. You should store your images in the static folder, not your src folder. The contents of the static folder get copied over to the public folder for production builds. That doesn't happen for the src folder. So place that images folder inside your static folder and update the path in your gatsby-config.js and see if that fixes the problem.

Cinchonize

I have my photos in the static directory. Where in the gatsby-config.js would I update the path? would it be under "gatsby-source-filesystem -> options -> name:images path? – Trella