1

I am trying to use Gatsby image but getting Cannot read property 'childImageSharp' of null. I can't find where is the error. Topsection.js is a under Component. the image.jpg is inside of src/images/images.jpg . Still getting the error and couldn't manage to solve it. I have attached all the files. Please help me to solve.

Topsection.js

const TopSection = () => {
  const data = useStaticQuery(graphql`

   {
      featureimg: file(relativePath: { eq: "image.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 60) {
            ...GatsbyImageSharpFluid
          }
        }
      }
     
    }
    
  `);
  

    return (
      
        <>
  <div className="first-post-thumbnail">
                    <a href="/best-keyboard-for-wow/">
                      
                        <Image fluid={data.featureimg.childImageSharp.fluid} />
                    
                    </a>
                  </div>

   </>
    );
};

export default TopSection;

Error:

35 | <div className="first-post-thumbnail">
  36 |   <a href="/best-keyboard-for-wow/">
  37 |     
> 38 |       <Image fluid={data.featureimg.childImageSharp.fluid} />
     | ^  39 |   
  40 |   </a>
  41 | </div>

Config

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: ``,
    description: ``,
    author: ``,
  },
  plugins: [
  `gatsby-plugin-react-helmet`,
  `gatsby-transformer-sharp`, `gatsby-plugin-sharp`,

  
  {

    
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },

    resolve: `gatsby-plugin-prefetch-google-fonts`,
    options: {
      fonts: [
        {
          family: `Poppins`,
          variants: [`200`,`300`,`400`,`500`,`600`,`700`, `900`]
        },
      ],
    },

    
  },
],
}

4 Answers4

2

Assuming you've set your filesystem correctly and the image is available by GraphQL.

Try:

import Img from "gatsby-image"
// other imports

const TopSection = () => {
  const data = useStaticQuery(graphql`
      query {
          featureimg: file(relativePath: { eq: "/images/image.jpg" }) {
              childImageSharp {
                  fluid(maxWidth: 60) {
                      ...GatsbyImageSharpFluid
                  }
              }
          }
      }
  `);

  return <div className="first-post-thumbnail">
    <a href="/best-keyboard-for-wow/">
      <Img fluid={data.featureimg.childImageSharp.fluid} />
    </a>
  </div>;
};

export default TopSection;

The relativePath field of a file node is relative to the directory you specified in gatsby-source-filesystem.

I would suggest using <Link> component instead of native <a> (anchor) for internal navigation:

    <Link to="/best-keyboard-for-wow/">

Check the query in the GraphQL playground (localhost:8000/___graphql) to check the spelling and the results.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • can you check the question again, i have added the config file. –  Oct 24 '20 at 07:29
  • On graphql i am getting the error of : "message": "Unknown fragment \"GatsbyImageSharpFluid\".", –  Oct 24 '20 at 07:33
  • No. It's giving me a error. Unknown fragment GatsbyImageSharpFluid –  Oct 24 '20 at 07:38
  • Do you have an image named `image.jpg`? Try removing the fragment and try getting the path or other parameters of the image, once the query is set, add the fragment. – Ferran Buireu Oct 24 '20 at 07:43
  • Then your relative path should be `/images/image.jpg`. I've updated the answer. As I said, try retrieving other fields of the image before using directly the fragment in order to check your paths. If you can retrieve other fields from the image, your query will be correct. – Ferran Buireu Oct 24 '20 at 08:22
  • Can you check the problem? https://stackoverflow.com/questions/64810972/how-to-remove-hash-from-image-url-gatsby –  Nov 12 '20 at 20:03
0

Clearing the cache was successful for me (in addition to removing package-lock.json and re-run npm install):

gatsby clean

David Thery
  • 669
  • 1
  • 6
  • 21
0

Cleaning the project and re-running the "npm install" works

npm run clean

then

npm install
zechno
  • 21
  • 4
0

The image should be placed in the 'static/images/image.jpg' directory instead of 'src/images/image.jpg'.

anry_iron
  • 1
  • 1