Gatsby Image showing 0x0 pixels

HI i have been learning gatsby and im trying to use gatsby image but my images are not showing however you ca see it in the console wit 0 x 0 pixels. below I will put in the code for my config file and the file with the query along with a screenshot of the console
gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Mo-Travel`,
    description: `My travel website showcasing the best destinations and deals`,
    author: `Mohamed Mohamud`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `video`,
        path: `${__dirname}/src/assets/videos`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
  ],
};

query file

import React from 'react';
import styled from 'styled-components';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import { Button } from './Button';

const Trips = () => {
  const data = useStaticQuery(graphql`
    query MyQuery {
      allTripsJson {
        edges {
          node {
            alt
            button
            name
            img {
              childImageSharp {
                fluid(maxHeight: 600, maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  `);

  function getTrips(data) {
    const tripsArray = [];
    data.allTripsJson.edges.forEach((item, index) => {
      tripsArray.push(
        <ProductCard key={index}>
          <Img
            src={item.node.img.childImageSharp.fluid.src}
            alt={item.node.alt}
            fluid={item.node.img.childImageSharp.fluid}
            
          />
          <ProductInfo>
            <TextWrap>
              <ImLoaction />
              <ProductTitle>{item.node.name}</ProductTitle>
            </TextWrap>
            <Button to='/trips'>{item.node.button}</Button>
          </ProductInfo>
        </ProductCard>
      );
    });
    return tripsArray;
  }

  return (
    <ProductsContainer>
      <ProductsHeading>Heading</ProductsHeading>
      <ProductWrapper>{getTrips(data)}</ProductWrapper>
    </ProductsContainer>
  );
};

export default Trips;

const ProductsContainer = styled.div`
  min-height: 100vh;
  padding: 5rem calc((100vw -1300px) / 2);
  background: violet;
  color: #fff;
`;

const ProductsHeading = styled.div`
  font-size: clamp(1.2rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 5rem;
  color: #000;
`;

const ProductWrapper = styled.div``;

const ProductCard = styled.div``;

const ProductInfo = styled.div``;

const TextWrap = styled.div``;

const ImLoaction = styled.div``;

const ProductTitle = styled.div``;

Hi @mmohamud720. I have never used gatsby before but I am seeing opacity: 0 and position: absolute somewhere in the inline CSS. Are you sure they are not the cause of your troubles?

all of the styling is automatic from gatsby-image so I can’t change it. Im using it because it make images auto responsive and it’s a decent intro to graphql

I had the same issue which is what brought me here.
The reason this seems to happen is due to the container not having a size. Try setting a size on parent and it should show up.

Wow that actually worked, I gave up on the project haha. Thanks to you I’ll go back to it

Awesome!! Glad it helped! I’ve found Gatsby images the hardest part to understand in Gatsby, but it’s really cool once it’s working!

TypeError: Cannot read property ‘childImageSharp’ of null

Trips.js

import React from 'react'
import styled from 'styled-components'
import {useStaticQuery, graphql} from 'gatsby'
import Img from 'gatsby-image'

const Trips = () => {
  const data = useStaticQuery(graphql`
  query TripsQuery {
    allTripsJson {
      edges {
        node {
          alt
          button
          name
          img {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
  `)

  function getTrips(data){
    const tripsArray = []
    data.allTripsJson.edges.forEach((item, index) => {
      tripsArray.push(
        <div key={index}>
          <Img src={item.node.img.childImageSharp.fluid.src}
          fluid={item.node.img.childImageSharp} />
        </div>
      )
    })
    return tripsArray

  }

  return (
    <div>
      <ProductsContainer>
        <ProductHeading>Heading</ProductHeading>
        <ProductWrapper>{getTrips(data)}</ProductWrapper>
      </ProductsContainer>
    </div>
  )
}

export default Trips

const ProductsContainer = styled.div`
  min-height: 100vh;
  width: 100vw;
  width: 100%;
  padding: 5rem calc((100vw - 1300px) / 2);
  background: red;
  color:#fff;

`
const ProductHeading = styled.div`
  font-size: clamp(1.2rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 5rem;
  color:#000;
`
const ProductWrapper = styled.div`

`

config.js

module.exports = {
  siteMetadata: {
    title: `Explore Naija`,
    description: `Travel website showcasing the best travel destination and deals online.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `videos`,
        path: `${__dirname}/src/assets/videos`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },

  ],
}

trps.json

[
  {
    "img": "../assets/images/landing-page.jpg",
    "alt": "tin tan buddah",
    "name": "tian tan budah",
    "button": "view destinantion"
  },
  {
    "img": "../assets/images/obub-cattle-ranch-top.jpg",
    "alt": "tin tan buddah",
    "name": "tian tan budah",
    "button": "view destinantion"
  },
  {
    "img": "../assets/images/obudu-hiltop-road.jpg",
    "alt": "tin tan buddah",
    "name": "tian tan budah",
    "button": "view destinantion"
  },
  {
    "img": "../assets/images/yankari-game-reserve-bauch2.jpg",
    "alt": "tin tan buddah",
    "name": "tian tan budah",
    "button": "view destinantion"
  }
]

@ptricky @mmohamud720 pls help me check this out i do not want to abandon this project

Hey! Happy to (try to) help.

I think the problem is here:
<ProductWrapper>{getTrips(data)}</ProductWrapper>

First, getTrips() returns an array. Second, that won’t run until it’s called so the data won’t necessarily be ready when it attempts to draw the first time.

You might be better off doing something like this (and getting rid of the getTrips() function.

<div>
      <ProductsContainer>
        <ProductHeading>Heading</ProductHeading>
        {data.map( elem => (
             <ProductWrapper key={elem.id}>
                      <Img src={item.node.img.childImageSharp.fluid.src}
                                   fluid={item.node.img.childImageSharp} />
           </ProductWrapper> 
         )}        
      </ProductsContainer>
    </div>

I hope that helps. If I’m way off, maybe you have a working instance running that I can look at.

1 Like

@ptricky thanks for your quick response after a lot of stackoverflow and a lot of code forum i later resolve it by renaming my image thanks